JQuery实现数字滚动增加的效果

 

因为项目要求，要做一个数字滚动增加的效果。在网上没有找到好的插件，所以就自己做了一个，供大家参考。

先来看一下效果，看看你们需不需要：

这个动画效果，只支持8位数字（包括小数点后两位），需要其他的，可以自己看看修改一下

先上html代码：

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

 

 完全写死了各个位置，因为我这里需求就只到十万位，所以代码做的不灵活。

然后再上css代码：（这里只是做了最基本的样式，其实没啥，可以忽略。）

1. #container {
2. background: black;
3. }
4.  
5. .flip {
6. margin:0auto;
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. returnNumber(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. functionSubtr(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. returnSubtr(this, arg);
94. };

 

 然后就是主要的部分了：

 

 

 

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

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

<iframe style="background-color: transparent; border: 0px; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 788px; height: 350px; background-position: initial initial; background-repeat: initial initial;" src="http://www.gbtags.com/gb/rtreplayerpreview-standalone/1322.htm"></iframe>

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

1. 把玩代码： http://www.gbtags.com/gb/rtreplayerpreview/1322.htm