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

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

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

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

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

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

先上html代码：

<divclass="flip">
<divclass="price-icon">￥</div>
<divclass="price-div">
<divclass="h-k number"></div>
<divclass="t-k number"></div>
<divclass="k number"></div>
<divclass="comma sign">,</div>
<divclass="h number"></div>
<divclass="t number"></div>
<divclass="single number"></div>
<divclass="sign dot">.</div>
<divclass="t-d number"></div>
<divclass="h-d number"></div>
</div>
</div>

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

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

#container {
background: black;
}
.flip {
margin:0auto;
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){
}
returnNumber(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);
};
//减法函数
functionSubtr(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){
returnSubtr(this, arg);
};

然后就是主要的部分了：

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

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

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

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

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

先上html代码：

然后是js代码：

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

相关推荐