Maison > Article > interface Web > js implémente le fractionnement de l'animation en arrière-plan

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

韦小宝original: 2017-11-20 10:11:232153parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment dessiner des triangles et des parallélogrammes avec CSSArticle suivant：Comment dessiner des triangles et des parallélogrammes avec CSS

Articles Liés

Voir plus