JQuery實現數字滾動增長的效果

 

由於項目要求，要作一個數字滾動增長的效果。在網上沒有找到好的插件，因此就本身作了一個，供你們參考。

先來看一下效果，看看大家需不須要：

這個動畫效果，只支持8位數字（包括小數點後兩位），須要其餘的，能夠本身看看修改一下

先上html代碼：

1. <div class="flip">
2. <div class="price-icon">￥</div>
3. <div class="price-div">
4. <div class="h-k number"></div>
5. <div class="t-k number"></div>
6. <div class="k number"></div>
7. <div class="comma sign">,</div>
8. <div class="h number"></div>
9. <div class="t number"></div>
10. <div class="single number"></div>
11. <div class="sign dot">.</div>
12. <div class="t-d number"></div>
13. <div class="h-d number"></div>
14. </div>
15. </div>

 

 徹底寫死了各個位置，由於我這裏需求就只到十萬位，因此代碼作的不靈活。

而後再上css代碼：（這裏只是作了最基本的樣式，其實沒啥，能夠忽略。）

1. #container {
2. background: black;
3. }
4.  
5. .flip {
6. margin: 0 auto;
7. width: 500px;
8. height: 100px;
9. color: yellow;
10. padding-top: 40px;
11. }
12.  
13. .price-div {
14. font: 12px tahoma, Arial, Verdana, sans-serif;
15. }
16.  
17. .price-div > div,
18. .total-price > div {
19. float: left;
20. text-align: center;
21. }
22.  
23. .price-icon {
24. background: dimgrey;
25. width: 25px;
26. height: 30px;
27. line-height: 30px;
28. font-size: 26px;
29. font-weight: bold;
30. float: left;
31. margin-right: 2px;
32. }
33.  
34. .price-div .number {
35. background: dimgrey;
36. width: 32px;
37. height: 48px;
38. line-height: 48px;
39. font-size: 43px;
40. font-weight: bold;
41. overflow: hidden;
42. margin-right: 1px;
43. }
44.  
45. .price-div .sign {
46. font-size: 40px;
47. font-weight: bold;
48. line-height: 68px;
49. height: 48px;
50. }

 

 而後是js代碼：

首先，因爲牽扯到各類加減乘除計算，因爲衆所周知的緣由，js的加減乘除會有坑，因此本身寫一個：

1. //乘法函數
2. function accMul(arg1, arg2) {
3. var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
4. try {
5. m += s1.split(".")[1].length;
6. }
7. catch (e) {
8. }
9. try {
10. m += s2.split(".")[1].length;
11. }
12. catch (e) {
13. }
14. return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
15. }
16.  
17. //給Number類型增長一個mul方法，使用時直接用 .mul 便可完成計算。
18. Number.prototype.mul = function (arg) {
19. return accMul(arg, this);
20. };
21.  
22. //除法函數
23. function accDiv(arg1, arg2) {
24. var t1 = 0, t2 = 0, r1, r2;
25. try {
26. t1 = arg1.toString().split(".")[1].length;
27. }
28. catch (e) {
29. }
30. try {
31. t2 = arg2.toString().split(".")[1].length;
32. }
33. catch (e) {
34. }
35. with (Math) {
36. r1 = Number(arg1.toString().replace(".", ""));
37. r2 = Number(arg2.toString().replace(".", ""));
38. return (r1 / r2) * pow(10, t2 - t1);
39. }
40. }
41. //給Number類型增長一個div方法，，使用時直接用 .div 便可完成計算。
42. Number.prototype.div = function (arg) {
43. return accDiv(this, arg);
44. };
45. function accAdd(arg1, arg2) {
46. var r1, r2, m;
47. try {
48. r1 = arg1.toString().split(".")[1].length;
49. }
50. catch (e) {
51. r1 = 0;
52. }
53. try {
54. r2 = arg2.toString().split(".")[1].length;
55. }
56. catch (e) {
57. r2 = 0;
58. }
59. m = Math.pow(10, Math.max(r1, r2));
60. return (arg1.mul(m) + arg2.mul(m)).div(m);
61. }
62.  
63. //給Number類型增長一個add方法，，使用時直接用 .add 便可完成計算。
64. Number.prototype.add = function (arg) {
65. return accAdd(arg, this);
66. };
67.  
69. //減法函數
70. function Subtr(arg1, arg2) {
71. var r1, r2, m, n;
72. try {
73. r1 = arg1.toString().split(".")[1].length;
74. }
75. catch (e) {
76. r1 = 0;
77. }
78. try {
79. r2 = arg2.toString().split(".")[1].length;
80. }
81. catch (e) {
82. r2 = 0;
83. }
84. m = Math.pow(10, Math.max(r1, r2));
85. //last modify by deeka
86. //動態控制精度長度
87. n = (r1 >= r2) ? r1 : r2;
88. return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
89. }
91. //給Number類型增長一個add方法，，使用時直接用 .sub 便可完成計算。
92. Number.prototype.sub = function (arg) {
93. return Subtr(this, arg);
94. };

 

 而後就是主要的部分了：

在上一個動畫沒完，下一個動畫開始的時候，先把以前的動畫中止，並執行到最後，因此會有感受卡頓的狀況出現。。。暫時不知道怎麼解決

 整個滾動效果，經過調用$.animateToPrice(price)來進行操做。

完整內容及代碼見原文：http://www.gbtags.com/gb/share/6207.htm