首页 > 代码库 > 图片破碎 效果 修正

图片破碎 效果 修正

 

 

以前做的 图片破碎的程序,后来发现有点问题:

 

技术分享

 

即多出一部分,现在给图像背景设置个偏移量,完美解决:

 

技术分享

 

完整代码:

 

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body{
            background-color: #000;
        }
        .rh-box{
            position: relative;
            left: 200px;
            width: 200px;
            height: 200px;
            /*overflow-x: hidden;*/
        }
        .boomCont{
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0px;left: -7px;
            /*overflow: hidden;*/
            /*border: 1px solid red;*/
            /*display: flex;*/
        }
        .test-img{
            width: inherit;
            height: inherit;
            position: absolute;
            left: 5px;
            overflow: hidden;
            /*display: none;*/
            z-index: 10;
        }

        .item-ball{
            position: relative;
            top: 0px;left: 0px;
            float: left;
            background: url("img/redheart.png") no-repeat;
            background-size: 200px 200px;
            transition:all 1.8s linear;
            border-radius: 50%;
        }
        .item-ball:nth-child(1){
            display: none;
        }

    </style>
</head>
<body>
        <div class="rh-box">
            <div class="boomCont" id="boomCont">
                <div class="item-ball"></div>
                <i class="oh"></i>
                <img class="test-img" src="img/redheart.png" alt="">
            </div>
        </div>


</body>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/JavaScript">
    var box=document.getElementById(boomCont),
         ball=document.getElementsByClassName(item-ball)[0],
         frag=document.createDocumentFragment(),
         dia=5,   //直径
         off= 5,  //图像背景偏移量 解决左侧溢出部分
         //中心点坐标
         xC= box.getBoundingClientRect().left+box.getBoundingClientRect().width/ 2,
         yC= box.getBoundingClientRect().top+box.getBoundingClientRect().height/ 2,
         rNum=parseInt(box.getBoundingClientRect().height/dia),
         cNum=parseInt(box.getBoundingClientRect().width/dia) ;
//            rNum=160/dia,cNum=160/dia;
    ball.style.width=dia+px;ball.style.height=dia+px;
    for(var r=0;r<rNum;r++){
        for (var c=0;c<cNum;c++){
            var cl=ball.cloneNode(true);
            ball.style.backgroundPosition=-+(c*dia+off)+px +-+r*dia+px;
            frag.appendChild(cl);
        }
    }
    box.appendChild(frag);
    function randNum(min,max){
        return (Math.random()*(max - min)+min);
    }
    function disappear(){
        console.log(xC,yC);
        $(.test-img).fadeOut(1000);
      $(.item-ball).each(function(){
          $(this).animate({
              top:randNum(-110,110)+px,
              left:randNum(-200,200)+px,
              transform:scale(+randNum(0.3,1.8)+),
              opacity:0
          });
      });
    }
    disappear();

</script>
</html>

 

图片破碎 效果 修正