图片破碎 （1） 分割图片

 

 图片破碎 （1） 分割图片

最终效果：

完整代码：

 

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .boomCont{
            width: 400px;
            height: 220px;
            position: absolute;
            top: 0px;right: 0px;
            bottom: 0px;left: 0px;
            margin: auto;
            overflow: hidden;
            border: 1px solid red;
            /*display: flex;*/
        }
        .test-img{
            display: none;
        }
        .item-ball{
            position: relative;
            top: 0px;left: 0px;
            float: left;
            background: url("test-img/t1.jpg");
            /*background-size:500px 400px;*/
            /*background-color: black;*/
            border-radius: 50%;
        }
        .item-ball:nth-child(1){
            display: none;
        }
    </style>
</head>
<body>
        <div class="boomCont" id="boomCont">
            <div class="item-ball"></div>
            <img class="test-img" src="test-img/t1.jpg" alt="">
        </div>

</body>
<script type="text/JavaScript">
    var box=document.getElementById('boomCont'),
         ball=document.getElementsByClassName('item-ball')[0],
         frag=document.createDocumentFragment(),
         dia=10,   //直径
         rNum=parseInt(box.getBoundingClientRect().height/dia),
         cNum=parseInt(box.getBoundingClientRect().width/dia) ;
    ball.style.width=dia+'px';ball.style.height=dia+'px';
//    ball.style.backgroundPosition='0px 0px';
    for(var r=0;r<rNum;r++){
        for (var c=0;c<cNum;c++){
            var cl=ball.cloneNode(true);
            ball.style.backgroundPosition='-'+c*dia+'px '+'-'+r*dia+'px';
            frag.appendChild(cl);
        }
    }
    box.appendChild(frag);
    console.log(box.getBoundingClientRect().top,box.getBoundingClientRect().left,box.getBoundingClientRect().width);
</script>
</html>

 

posted @ 2017-05-10 12:53  快乐的咸鱼  阅读(282)  评论(0)  编辑  收藏  举报