jQuery实现数字自动增加或者减少的动画效果示例
程序员文章站
2022-03-04 13:18:45
本文实例讲述了jquery实现数字自动增加或者减少的动画效果。分享给大家供大家参考，具体如下：
效果图：
1.html：
本文实例讲述了jquery实现数字自动增加或者减少的动画效果。分享给大家供大家参考，具体如下：
效果图：
1.html：
<div class="up"></div> <br> <div class="down"></div>
2.js：
$(function(){
var obj={
el:$(".up"),
max:1000,
start:100//增加开始的初始值
}
var obj2={
el:$(".down"),
max:1000,
end:100//减少到最小的值
}
up(obj);
down(obj2)
})
function up(obj){
var item=obj.el;
var num=obj.max;
var start=obj.start;
time2=setinterval(function(){
start++;
if(start>num){
start=num;
clearinterval(time2);
}
item.text(start)
},1)
}
function down(obj){
var item=obj.el;
var num=obj.max;
var min=obj.end;
time1=setinterval(function(){
num--;
if(num<min){
num=min;
clearinterval(time1)
}
item.text(num)
},1)
}
可以自行设定每次增加的大小
问题：
1。要是需要用背景图片中的数字替换当前显示的数字，并且有上下滚动的效果怎么做？ background-position
2。实现了问题1的效果之后，如果要最大的位数最先停止动画，后面的位数依次停止怎么做？或者开始动画的时候，最后一位数开始动画，最大的位数最后开始动画怎么做？
3。如果数字增加到千的时候，在千位之后加逗号，例如：1，000。这又怎么做？
4。怎样用settimeout来实现？settimeout可以解决动画先后顺序，即延迟动画
感兴趣的朋友可以使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
更多关于jquery相关内容还可查看本站专题：《jquery动画与特效用法总结》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇： nodejs图片处理工具gm用法小结