圖片破碎 效果 修正
阿新 • • 發佈：2017-06-12
發現 transform bound cli oom 溢出 ansi lex 分享
以前做的 圖片破碎的程序，後來發現有點問題：
即多出一部分，現在給圖像背景設置個偏移量，完美解決：
完整代碼：
<!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>
圖片破碎 效果 修正