一个150x18000px的长图如下
原理:将它一帧一帧向上调,上调的速度过快,可以使观者误以为是一个动图(就像以前一帧一帧的动画片。)
所遇到的问题如下:
无限循环:在过程中,发现如果不加flag识别有无正在循环,在一次循环未完成鼠标又一次悬浮之上的情况下,将会产生无限循环的效果。因此可以加一个flag,若是循环未完成,则跳过。
移开鼠标后动画在执行完再停止:使用stop()
var movePic = $(".movePic")
var hit = 0;
var flag = 0;
var mflag = 0;
movePic.hover(function() {
if (flag == 0){
flag = 1
mtimer = setInterval(function() {
hit++;
$(".movePic").animate({
backgroundPositionY:"-=150px",
},10)
console.log(hit)
if (hit == 121){
clearInterval(mtimer);
hit=0;
flag = 0;
}
},10)}
}
,function() {
console.log(hit)
$(".movePic").stop()
})
(此处有一处bug:鼠标一直悬浮在图片上面将会比鼠标悬浮在上面后在动画未执行完前移开多一帧。)