js implementiert die Aufteilung der Hintergrundanimation-js-Tutorial-php.cn

js implementiert die Aufteilung der Hintergrundanimation

韦小宝

Freigeben： 2017-11-20 10:11:23

Original

2195 Leute haben es durchsucht

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 ~~

js implementiert die Aufteilung der Hintergrundanimation

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>

Nach dem Login kopieren

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:

JS-Imitations-Chat-Seite

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!