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

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

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





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

先上html代码：

<div class="flip">

<div class="price-icon">￥</div>

<div class="price-div">

<div class="h-k number"></div>

<div class="t-k number"></div>

<div class="k number"></div>

<div class="comma sign">,</div>

<div class="h number"></div>

<div class="t number"></div>

<div class="single number"></div>

<div class="sign dot">.</div>

<div class="t-d number"></div>

<div class="h-d number"></div>

</div>

</div>

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

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

#container {

background: black;

}

.flip {

margin: 0 auto;

width: 500px;

height: 100px;

color: yellow;

padding-top: 40px;

}

.price-div {

font: 12px tahoma, Arial, Verdana, sans-serif;

}

.price-div > div,

.total-price > div {

float: left;

text-align: center;

}

.price-icon {

background: dimgrey;

width: 25px;

height: 30px;

line-height: 30px;

font-size: 26px;

font-weight: bold;

float: left;

margin-right: 2px;

}

.price-div .number {

background: dimgrey;

width: 32px;

height: 48px;

line-height: 48px;

font-size: 43px;

font-weight: bold;

overflow: hidden;

margin-right: 1px;

}

.price-div .sign {

font-size: 40px;

font-weight: bold;

line-height: 68px;

height: 48px;

}

然后是js代码：
首先，由于牵扯到各种加减乘除计算，由于众所周知的原因，js的加减乘除会有坑，所以自己写一个：

//乘法函数

function accMul(arg1, arg2) {

var m = 0, s1 = arg1.toString(), s2 = arg2.toString();

try {

m += s1.split(".")[1].length;

}

catch (e) {

}

try {

m += s2.split(".")[1].length;

}

catch (e) {

}

return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);

}

//给Number类型增加一个mul方法，使用时直接用 .mul 即可完成计算。

Number.prototype.mul = function (arg) {

return accMul(arg, this);

};

//除法函数

function accDiv(arg1, arg2) {

var t1 = 0, t2 = 0, r1, r2;

try {

t1 = arg1.toString().split(".")[1].length;

}

catch (e) {

}

try {

t2 = arg2.toString().split(".")[1].length;

}

catch (e) {

}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""));

r2 = Number(arg2.toString().replace(".", ""));

return (r1 / r2) * pow(10, t2 - t1);

}

}

//给Number类型增加一个div方法，，使用时直接用 .div 即可完成计算。

Number.prototype.div = function (arg) {

return accDiv(this, arg);

};

function accAdd(arg1, arg2) {

var r1, r2, m;

try {

r1 = arg1.toString().split(".")[1].length;

}

catch (e) {

r1 = 0;

}

try {

r2 = arg2.toString().split(".")[1].length;

}

catch (e) {

r2 = 0;

}

m = Math.pow(10, Math.max(r1, r2));

return (arg1.mul(m) + arg2.mul(m)).div(m);

}

//给Number类型增加一个add方法，，使用时直接用 .add 即可完成计算。

Number.prototype.add = function (arg) {

return accAdd(arg, this);

};

//减法函数

function Subtr(arg1, arg2) {

var r1, r2, m, n;

try {

r1 = arg1.toString().split(".")[1].length;

}

catch (e) {

r1 = 0;

}

try {

r2 = arg2.toString().split(".")[1].length;

}

catch (e) {

r2 = 0;

}

m = Math.pow(10, Math.max(r1, r2));

//last modify by deeka

//动态控制精度长度

n = (r1 >= r2) ? r1 : r2;

return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));

}

//给Number类型增加一个add方法，，使用时直接用 .sub 即可完成计算。

Number.prototype.sub = function (arg) {

return Subtr(this, arg);

};

然后就是主要的部分了：

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

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

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