到目前为止,我有这个:
场景是w 5507px
X H 的精灵表,
并且 png 被命名为动画png或其他东西2100px
550 x 700
图像在背景上div
,它转到坐标背景位置,但到目前为止,动画循环播放,我需要它停止,我一直在尝试一些解决方案,但没有...我会很感激任何想法,请检查代码
<style>
#anim{
width:550px;
height:700px;
background-image:url(anim3.png);
}
</style>
<title>Untitled Document</title>
</head>
<body onload="init()">
<script>
var imageWidth=5500,
imageHeight=2100,
xpos=0,
ypos=0,
index=0,
numFrames= 30,
frameSize=550,
frameHeight=700,
div;
function init(){
div = document.getElementById('anim');
loop();
setInterval(loop, 1000 / 10);
}
function loop() {
//multiplying by -1 because we want to move the image to the left and up to reveal the area we want to see.
div.style.backgroundPosition = (-xpos)+"px "+(-ypos)+"px";
//each time around we add the frame size to our xpos, moving along the source image.
xpos += frameSize;
ypos +=frameHeight;
//increase the index so we know which frame of our animation we are currently on.
index += 1;
//if our index is higher than our total number of frames, we're at the end and better start over.
if (index == 30) {
div.style.backgroundPosition =(imageWidth)+"px"+(imageHeight)+"px";
//if we've gotten to the limit of our source image's width, we need to move down one row of frames.
} else if (xpos +frameSize > imageWidth){
xpos =0;
ypos += 700;
}
}
</script>