js implémente le fractionnement de l'animation en arrière-plan-js tutoriel-php.cn

js implémente le fractionnement de l'animation en arrière-plan

韦小宝

Libérer： 2017-11-20 10:11:23

original

2168 Les gens l'ont consulté

js implémente le fractionnement de l'animation en arrière-plan et fournit le code source gratuitement. Les amis intéressés peuvent l'utiliser directement pour la recherche et l'étude afin d'aider à sublimer la connaissance de js. ou Pour les tutoriels, veuillez vous rendre sur le Site Web PHP chinois et recherchez par vous-même~~

$js implémente le fractionnement de lanimation en arrière-plan$

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>

Copier après la connexion

Ce qui précède est Si vous êtes intéressé, vous pouvez étudier le code source du fractionnement d'animation. Pour plus de code source et des didacticiels passionnants, veuillez vous rendre sur le Site Web PHP chinois pour parcourir ~~

Recommandations associées ：

Page de discussion d'imitation JS

Natif js implémente le code source de la boîte de div d'invite mobile

Implémentation js native de la zone de liste déroulante

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!