jQuery实现数字自动增加或者减少的动画效果示例
编程学习 2021-07-04 16:47www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现数字自动增加或者减少的动画效果,涉及jQuery结合时间函数动态设置元素属性相关操作技巧,需要的朋友可以参考下
本文实例讲述了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代码运行工具测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。