js implements background animation splitting-JS Tutorial-php.cn

js implements background animation splitting

韦小宝

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

Original

2151 people have browsed it

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

js implements background animation splitting

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>

Copy after login

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:

JS imitation chat page

##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!