HTML编程之利用jquery制作长图动画的方法

在网站前端编程开发中，我们经常会遇到需要将图片设置为背景图，当鼠标移入时利用setTimeout定时器去控制改变background-position使得图片逐帧向上移动，鼠标移除则控制向下移动，但要注意在鼠标移入和移出时要相互关闭定时器。具体如何来实现呢?下面就来为各位分析解答一下吧。
 

　　var positionC=['0','-75','-150','-225','-300','-375','-450','-525','-600','-675','-750','-825','-900','-975','-1050','-1125','-1200','-1275','-1350','-1425','-1500','-1575','-1650',"-1800"]; 　　// var positionC=['0','-180','-360','-540','-720','-900','-1080','-1260','-1440','-1620','-1500','-1650',"-1800",]; 　　var iconC=0; 　　var t1; 　　var i1; 　　$(".bgk1").mousemove(function () { 　　clearTimeout(i1); 　　iconABC(); 　　}) 　　$(".bgk1").mouseout(function () { 　　iconBC(); 　　}) 　　function iconABC(){ 　　$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px"); 　　iconC++; 　　if(iconC>positionC.length){ 　　iconC=positionC.length; 　　return; 　　} 　　t1=setTimeout(iconABC,80); 　　console.log("sdd"+iconC) 　　} 　　function iconBC(){ 　　clearTimeout(t1); 　　iconC--; 　　if(iconC<0){ 　　iconC=0; 　　return; 　　} 　　$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px"); 　　i1=setTimeout(iconBC,20); 　　console.log("--"+iconC) 　　}

好了，现在是不是就可以实现了呢?如果大家还是存在不理解的地方，或者总是有出错的地方，都是可以留言咨询的。