大佬教程收集整理的这篇文章主要介绍了通过滚动页面来实现jQuery动画元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
$(function() { $(document).on('scroll',function() { var top = $(document).scrollTop(); if (top > 2200 && top < 2401) { if (top > 2200 && top < 2210) { $('#seta2').stop().animate({left: "826px"},300,"eaSEOutQuad" ); } if (top > 2211 && top < 2220) { $('#seta2').stop().animate({left: "821px"},"eaSEOutQuad" ); } if (top > 2221 && top < 2230) { $('#seta2').stop().animate({left: "816px"},"eaSEOutQuad" ); } if (top > 2231 && top < 2240) { $('#seta2').stop().animate({left: "811px"},"eaSEOutQuad" ); } if (top > 2241 && top < 2250) { $('#seta2').stop().animate({left: "806px"},"eaSEOutQuad" ); } if (top > 2251 && top < 2260) { $('#seta2').stop().animate({left: "801px"},"eaSEOutQuad" ); } if (top > 2261 && top < 2270) { $('#seta2').stop().animate({left: "796px"},"eaSEOutQuad" ); } if (top > 2271 && top < 2280) { $('#seta2').stop().animate({left: "791px"},"eaSEOutQuad" ); } if (top > 2281 && top < 2290) { $('#seta2').stop().animate({left: "786px"},"eaSEOutQuad" ); } if (top > 2291 && top < 2300) { $('#seta2').stop().animate({left: "781px"},"eaSEOutQuad" ); } if (top > 2301 && top < 2310) { $('#seta2').stop().animate({left: "776px"},"eaSEOutQuad" ); } if (top > 2311 && top < 2320) { $('#seta2').stop().animate({left: "771px"},"eaSEOutQuad" ); } if (top > 2321 && top < 2330) { $('#seta2').stop().animate({left: "766px"},"eaSEOutQuad" ); } if (top > 2331 && top < 2340) { $('#seta2').stop().animate({left: "761px"},"eaSEOutQuad" ); } if (top > 2341 && top < 2350) { $('#seta2').stop().animate({left: "756px"},"eaSEOutQuad" ); } if (top > 2351 && top < 2360) { $('#seta2').stop().animate({left: "751px"},"eaSEOutQuad" ); } if (top > 2361 && top < 2370) { $('#seta2').stop().animate({left: "746px"},"eaSEOutQuad" ); } if (top > 2371 && top < 2380) { $('#seta2').stop().animate({left: "741px"},"eaSEOutQuad" ); } if (top > 2381 && top < 2390) { $('#seta2').stop().animate({left: "736px"},"eaSEOutQuad" ); } if (top > 2391 && top < 2400) { $('#seta2').stop().animate({left: "731px"},"eaSEOutQuad" ); } } else { $('#seta2').stop().animate({left: "830px"},"eaSEOutQuad" ); } });});
但是,这段代码太长了,对于200px滚动高度大约有70行,是否有更好的选择呢？
再次,抱歉英语不好……非常感谢你的关注
$(function() { var prevRange = -1; var range = -1; $(document).on('scroll',function() { var top = $(document).scrollTop(); if (top >= 2200 && top < 2401) { range = Math.floor(top/10)-220; } else { range = -1; } if(range != prevRangE) { prevRange = range; var leftPx = (826 - range*5) + "px"; $('#seta2').stop().animate({left: leftPx},"eaSEOutQuad" ); } }); });
此代码找出您所在的10px范围,然后使用它来确定动画的位置,假设您的范围都是10px范围,动画范围是每5px.
以上是大佬教程为你收集整理的通过滚动页面来实现jQuery动画元素全部内容，希望文章能够帮你解决通过滚动页面来实现jQuery动画元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。