浙江铃声推荐联盟

简单易学的JS背景分裂效果

网页设计自学平台2019-06-25 00:57:19


主要实现的是一个将图片分裂的特效



源码如下:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>1109test</title>
    <style>
        .container{            margin: 100px auto;            width: 500px;            height: 500px;            line-height: 0;            font-size: 0;        }
        .container div{            width: 100px;            height: 100px;            background-image: url("http://cdn.attach.qdfuns.com/notes/pics/201711/14/155033sauj7xrjahjxjpjd.png");            /*background-repeat: no-repeat;*/
            display: inline-block;            position: relative;            top: 0;            left: 0;            transition: all 0.5s;        }
        .container div:nth-of-type(3){        }
    </style></head><body><div class="container"></div><script>

    var divs = [];    var container = document.getElementsByClassName("container");    for (var i = 0; i < 25; i ++) {        var num = Math.floor(Math.random()*200 - 100);
        divs.push(document.createElement("div"));
        divs[i].style.top = num + "px";
        divs[i].style.left = num + "px";
        divs[i].style.backgroundPosition = -i%5*100 + "px " + -Math.floor(i/5)*100 + "px";        console.log(divs[i].style.backgroundPosition);
        container[0].appendChild(divs[i]);
    }

    container[0].onmouseenter = function () {        for (var i = 0; i < 25; i ++) {
            divs[i].style.top = 0 + "px";
            divs[i].style.left = 0 + "px";
        }
    };
    container[0].onmouseleave = function () {        for (var i = 0; i < 25; i ++) {            var num = Math.floor(Math.random()*200 - 100);
            divs[i].style.top = num + "px";
            divs[i].style.left = num + "px";
        }

    }</script></body></html>
想做网站又很懒?50套国外H5流行模板免费送
点我获取

戳“阅读原文”入群免费领取前端开发教程