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

发布时间:2018-10-09 18:37:27

在网站前端编程开发中,我们经常会遇到需要将图片设置为背景图,当鼠标移入时利用setTimeout定时器去控制改变background-position使得图片逐帧向上移动,鼠标移除则控制向下移动,...

您的位置:仿站网 > 建站经验 > 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)   }



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

转载请注明本文地址:HTML编程之利用jquery制作长图动画的方法 https://www.ecmsw.cn/html/488.html
仿站常见问题

仿站项目

仿站网专业提供帝国cms仿站及二次开发,质量保证!仿站价格请询问客服。请在咨询时将仿站目标网址发送给客服。

仿站流程

下面列出来了仿站建站的流程


仿站网专注于帝国CMS仿站及二次开发、模板定制等各种有关帝国CMS程序疑难杂症!
Copyright@2016-2019 仿站网 www.ecmsw.cn
鲁ICP备17005488号-1 鲁公网安备 37018102000481号