Heim > Artikel > Web-Frontend > js implementiert die Aufteilung der Hintergrundanimation
js implementiert die Aufteilung der Hintergrundanimation
- 韦小宝Original
- 2017-11-20 10:11:232100Durchsuche
js implementiert die Aufteilung von Hintergrundanimationen und stellt den Quellcode kostenlos für Recherchen und Studien zur Verfügung, um das Wissen über js zu vertiefen oder Für Tutorials gehen Sie bitte zur PHP-Website für Chinesisch und suchen Sie selbst ~~
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("http://www.php.cn/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>Das Obige ist: Wenn Sie interessiert sind, können Sie den Quellcode der Animationsaufteilung studieren. Weitere Quellcodes und spannende Tutorials finden Sie auf der PHP Chinese-Website zum Durchsuchen~~
Verwandte Empfehlungen:
Native js implementiert den Quellcode des beweglichen Eingabeaufforderungs-Div-Felds
Native js-Implementierung des Dropdown-Listenfelds
Das obige ist der detaillierte Inhalt vonjs implementiert die Aufteilung der Hintergrundanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!