<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery digital scrolling adds animation effects</title> <style> #all{ width: 100%; margin: 0 auto; background: #ffffff; } #all .t_num i { width: 33px; height: 33px; display: inline-block; background: url(img/number2.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 = 21524; $(function() { show_num1(sum) setInterval(function(){ sum=sum+5 show_num1(sum) },5000); }); function show_num1(n) { sum=sum; var it = $(".t_num1 i"); var len = String(n).length; console.log(len) for(var i = 0; i < len; i++) { if(it.length <= i) { $(".t_num1").append("<i></i>"); } var num = String(n).charAt(i); //Set the corresponding value according to the height of the digital picture var y = -parseInt(num) * 36; 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>
