以前做的 图片破碎的程序，后来发现有点问题：
即多出一部分，现在给图像背景设置个偏移量，完美解决：
完整代码：
<!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>
时间： 2024-10-07 10:21:33