首页 > 设计 > WEB开发 > 正文

【特效】滚动的数字

2019-11-02 18:26:44
字体:
来源:转载
供稿:网友

这里写图片描述 演示地址:点我

测试代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .exp{ width: 620px; height: 30px; line-height: 30px; font-size: 18px; text-align: center; letter-spacing: 2px; color: #000; margin: 0 auto; position: relative; top: 10px; } b{ color: #f00; font-size: 18px; padding-right: 5px; } .scrollNum{ color: #f00; font-size: 18px; } </style></head><body> <div class="exp"> <span> <b>*</b> 看我在滚耶:<span class="scrollNum"></span> </span> </div> <script src="../js/jquery-1.11.3.js"></script> <script src="../123/js/test.js"></script> <script type="text/javascript"> /*滚动数字*/ $('.scrollNum').numberRock({ speed:34, count:197868 }); </script></body></html>

test.js代码如下:将此代码放到与jquery-1.11.3.js同文件夹下,最后引入到HTML中。

/*数字滚动*/(function($){ $.fn.numberRock=function(options){ var defaults={ speed:24, count:100 }; var opts=$.extend({}, defaults, options); var div_by = 100, count=opts["count"], speed = Math.floor(count / div_by), sum=0, $display = this, run_count = 1, int_speed = opts["speed"]; var int = setInterval(function () { if (run_count <= div_by&&speed!=0) { $display.text(sum=speed * run_count); run_count++; } else if (sum < count) { $display.text(++sum); } else { clearInterval(int); } }, int_speed); }})(jQuery);
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表