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

然后是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. //给Number类型增加一个mul方法，使用时直接用 .mul 即可完成计算。
17. Number.prototype.mul = function (arg) {
18. return accMul(arg, this);
19. };
20. //除法函数
21. function accDiv(arg1, arg2) {
22. var t1 = 0, t2 = 0, r1, r2;
23. try {
24. t1 = arg1.toString().split(".")[1].length;
25. }
26. catch (e) {
27. }
28. try {
29. t2 = arg2.toString().split(".")[1].length;
30. }
31. catch (e) {
32. }
33. with (Math) {
34. r1 = Number(arg1.toString().replace(".", ""));
35. r2 = Number(arg2.toString().replace(".", ""));
36. return (r1 / r2) * pow(10, t2 - t1);
37. }
38. }
39. //给Number类型增加一个div方法，，使用时直接用 .div 即可完成计算。
40. Number.prototype.div = function (arg) {
41. return accDiv(this, arg);
42. };
43. function accAdd(arg1, arg2) {
44. var r1, r2, m;
45. try {
46. r1 = arg1.toString().split(".")[1].length;
47. }
48. catch (e) {
49. r1 = 0;
50. }
51. try {
52. r2 = arg2.toString().split(".")[1].length;
53. }
54. catch (e) {
55. r2 = 0;
56. }
57. m = Math.pow(10, Math.max(r1, r2));
58. return (arg1.mul(m) + arg2.mul(m)).div(m);
59. }
60. //给Number类型增加一个add方法，，使用时直接用 .add 即可完成计算。
61. Number.prototype.add = function (arg) {
62. return accAdd(arg, this);
63. };
64. //减法函数
65. function Subtr(arg1, arg2) {
66. var r1, r2, m, n;
67. try {
68. r1 = arg1.toString().split(".")[1].length;
69. }
70. catch (e) {
71. r1 = 0;
72. }
73. try {
74. r2 = arg2.toString().split(".")[1].length;
75. }
76. catch (e) {
77. r2 = 0;
78. }
79. m = Math.pow(10, Math.max(r1, r2));
80. //last modify by deeka
81. //动态控制精度长度
82. n = (r1 >= r2) ? r1 : r2;
83. return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
84. }
85. //给Number类型增加一个add方法，，使用时直接用 .sub 即可完成计算。
86. Number.prototype.sub = function (arg) {
87. return Subtr(this, arg);
88. };

然后就是主要的部分了：

在上一个动画没完，下一个动画开始的时候，先把之前的动画停止，并执行到最后，所以会有感觉卡顿的情况出现。。。暂时不知道怎么解决

整个滚动效果，通过调用$.animateToPrice(price)来进行操作。

完整内容及代码见原文：http://www.gbtags.com/gb/share/6207.htm