Home > Article > Web Front-end > js implements background animation splitting
js Realizes background animation splitting and provides source code for free. Friends who are interested can directly use it for research and study to help the sublimation of js knowledge. More about js source code or Please go to PHP中文网 for tutorials and search by yourself~~
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style>
.container{
margin: 100px auto;
width: 500px;
height: 500px;
line-height: 0;
font-size: 0;
}
.container p{
width: 100px;
height: 100px;
background-image: url("//m.sbmmt.com/tpl/Index/Static/img/banner4.jpg");
/*background-repeat: no-repeat;*/
display: inline-block;
position: relative;
top: 0;
left: 0;
transition: all 0.5s;
}
.container p:nth-of-type(3){
}
</style>
</head>
<body>
<p>
</p>
<script>
var ps = [];
var container = document.getElementsByClassName("container");
for (var i = 0; i < 25; i ++) {
var num = Math.floor(Math.random()*200 - 100);
ps.push(document.createElement("p"));
ps[i].style.top = num + "px";
ps[i].style.left = num + "px";
ps[i].style.backgroundPosition = -i%5*100 + "px " + -Math.floor(i/5)*100 + "px";
console.log(ps[i].style.backgroundPosition);
container[0].appendChild(ps[i]);
}
container[0].onmouseenter = function () {
for (var i = 0; i < 25; i ++) {
ps[i].style.top = 0 + "px";
ps[i].style.left = 0 + "px";
}
};
container[0].onmouseleave = function () {
for (var i = 0; i < 25; i ++) {
var num = Math.floor(Math.random()*200 - 100);
ps[i].style.top = num + "px";
ps[i].style.left = num + "px";
}
}
</script>
</body>
</html>The above is animation split If you are interested, you can study the source code. For more source code and exciting tutorials, please visit PHP中文网~~
Related recommendations:
##Native js implements movable prompt div box source code
Native js implementation of drop-down list box
The above is the detailed content of js implements background animation splitting. For more information, please follow other related articles on the PHP Chinese website!