http://www.w2bc.com/article/220814 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery数字滚动更新次数代码</title> <style type="text/css"> #total { width: 300px; height: 40px; line-height: 40px; margin: 80px auto 20px auto; font-size: 20px; } #total .t_num { display: inline-block; line-height: 13px; margin: 2px 4px 0 4px; } #total .t_num i { width: 15px; height: 23px; display: inline-block; background: url(http://www.w2bc.com/upload/201703/05/jiaoben4907/images/number.png) no-repeat; background-position: 0 0; text-indent: -999em; } </style> </head> <body> <div id="total"> 下载量：<span class="t_num"></span>次 </div> </body> <script src="http://www.w2bc.com/upload/201703/05/jiaoben4907/js/jquery-1.7.1.js"></script> <script type="text/javascript"> (function ($) { if (!document.defaultView || !document.defaultView.getComputedStyle) { var oldCurCSS = jQuery.curCSS; jQuery.curCSS = function (elem, name, force) { if (name === 'background-position') { name = 'backgroundPosition'; } if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) { return oldCurCSS.apply(this, arguments); } var style = elem.style; if (!force && style && style[name]) { return style[name]; } return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); }; } var oldAnim = $.fn.animate; $.fn.animate = function (prop) { if ('background-position' in prop) { prop.backgroundPosition = prop['background-position']; delete prop['background-position']; } if ('backgroundPosition' in prop) { prop.backgroundPosition = '(' + prop.backgroundPosition + ')'; } return oldAnim.apply(this, arguments); }; function toArray(strg) { strg = strg.replace(/left|top/g, '0px'); strg = strg.replace(/right|bottom/g, '100%'); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; } $.fx.step.backgroundPosition = function (fx) { if (!fx.bgPosReady) { var start = $.curCSS(fx.elem, 'backgroundPosition'); if (!start) {//FF2 no inline-style fallback start = '0px 0px'; } start = toArray(start); fx.start = [start[0], start[2]]; var end = toArray(fx.end); fx.end = [end[0], end[2]]; fx.unit = [end[1], end[3]]; fx.bgPosReady = true; } var nowPosX = []; nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; }; })(jQuery); </script> <script type="text/javascript"> $(function () { getdata(); setInterval('getdata()', 3000); }); function getdata() { //var num = $("#cur_num").val(); //$.ajax({ // url: 'data.html', // type: 'POST', // dataType: "json", // data: { 'total': num }, // cache: false, // timeout: 10000, // error: function () { }, // success: function (data) { // show_num(data.count); // } //}); show_num("123456789"); } function show_num(n) { var it = $(".t_num i"); var len = String(n).length; for (var i = 0; i < len; i++) { if (it.length <= i) { $(".t_num").append("<i></i>"); } var num = String(n).charAt(i); var y = -parseInt(num) * 30; var obj = $(".t_num i").eq(i); obj.animate({ backgroundPosition: '(0 ' + String(y) + 'px)' }, 'slow', 'swing', function () { } ); } //$("#cur_num").val(n); } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jQuery数字滚动更新次数代码 喜欢 (0)or分享 (0)
