js实现背景动画分裂-js教程-PHP中文网

js实现背景动画分裂

韦小宝

发布： 2017-11-20 10:11:23

原创

2278人浏览过

js实现背景动画分裂，免费提供源码，有兴趣的朋友可以直接拿去研究研究，来帮助js知识的升华，更多关于js的源码或者教程请到php中文网自行搜索~~

X$DY]2N91G}]_E_O4V@QOX2.png

代码：

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

登录后复制

以上是动画分裂的源码，有兴趣的可以拿去研究研究，更多源码和精彩的教程请到PHP中文网浏览哦~~

相关推荐：

JS模仿聊天页面

原生js实现可移动的提示div框源码

原生js实现下拉列表框

以上就是js实现背景动画分裂的详细内容，更多请关注php中文网其它相关文章！