演示地址：點我
測試代碼如下：
<!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);新聞熱點
疑難解答
