本文實例講述了jQuery實現數字自動增加或者減少的動畫效果。分享給大家供大家參考，具體如下：
效果圖：
1.HTML：
<div class="up"></div><br><div class="down"></div>
2.JS：
$(function(){ var obj={ el:$(".up"), max:1000, start:100//增加開始的初始值 } var obj2={ el:$(".down"), max:1000, end:100//減少到最小的值 } up(obj); down(obj2)})function up(obj){ var item=obj.el; var num=obj.max; var start=obj.start; time2=setInterval(function(){ start++; if(start>num){ start=num; clearInterval(time2); } item.text(start) },1)}function down(obj){ var item=obj.el; var num=obj.max; var min=obj.end; time1=setInterval(function(){ num--; if(num<min){ num=min; clearInterval(time1) } item.text(num) },1)}可以自行設定每次增加的大小
問題：
1。要是需要用背景圖片中的數字替換當前顯示的數字，并且有上下滾動的效果怎么做？ background-position
2。實現了問題1的效果之后，如果要最大的位數最先停止動畫，后面的位數依次停止怎么做？或者開始動畫的時候，最后一位數開始動畫，最大的位數最后開始動畫怎么做？
3。如果數字增加到千的時候，在千位之后加逗號，例如：1，000。這又怎么做？
4。怎樣用settimeout來實現？settimeout可以解決動畫先后順序，即延遲動畫
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于jQuery相關內容還可查看本站專題：《jQuery動畫與特效用法總結》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
