jQuery实现数字自动增加或者减少的动画效果示例


Posted in jQuery onDecember 11, 2018

本文实例讲述了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代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现增删改查
Dec 22 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/10/09 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python清除字符串里非字母字符的方法
2015/07/02 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python实现简单flappy bird
2018/12/24 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
C#面试常见问题
2013/02/25 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
业务员岗位职责
2013/11/16 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
绿色环保标语
2014/06/12 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
奖励通知
2015/04/22 职场文书
物业保安辞职信
2015/05/12 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
python实现简单的三子棋游戏
2022/04/28 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers