jQuery数字滚动增加动画特效

共5个文件

js：2个

png：2个

html：1个

jquery

数字滚动

需积分: 23 22 下载量 67 浏览量 2018-11-26 10:15:43 上传评论收藏 36KB RAR 举报

温馨提示

jQuery数字滚动增加动画特效，使用digitalScrol.js，数字跟随增加滚动，不重置。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery数字滚动增加动画特效.rar （5个子文件）

jQuery数字滚动增加动画特效

index.html 1KB

img

num_bg.png 371B

number1.png 3KB

jquery.min.js 91KB

digitalScroll.js 2KB

共 5 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery数字滚动增加动画特效</title> <style> #all{ width: 100%; margin: 0 auto; background: #ffffff; } #all .t_num i { width: 33px; height: 47px; display: inline-block; background: url(img/number1.png) no-repeat; background-position: 0 0; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/digitalScroll.js"></script> <script type="text/javascript"> var sum = 13000; $(function() { setInterval(function(){ show_num1(sum) },1000); }); function show_num1(n) { sum=sum+5; console.log(n); var it = $(".t_num1 i"); var len = String(n).length; for(var i = 0; i < len; i++) { if(it.length <= i) { $(".t_num1").append("<i></i>"); } var num = String(n).charAt(i); //根据数字图片的高度设置相应的值 var y = -parseInt(num) * 58; var obj = $(".t_num1 i").eq(i); obj.animate({ backgroundPosition: '(0 ' + String(y) + 'px)' }, 'slow', 'swing', function() {}); } $("#cur_num").val(n); } </script> </head> <body> <div id="all"> <span class="t_num t_num1"></span> </div> </body> </html>

评论收藏

内容反馈

资源评论