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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 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
main.php
2006/12/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js读取cookie方法总结
2014/10/31 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python编程线性回归代码示例
2017/12/07 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python视频按帧截取图片工具
2019/07/23 Python
Python 3 判断2个字典相同
2019/08/06 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
巴西购物网站:Submarino
2020/01/19 全球购物
公司董事长职责
2013/12/12 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
安全生产实施方案
2014/02/23 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
董事会决议范本
2015/07/01 职场文书
国庆节新闻稿
2015/07/17 职场文书
修辞手法有哪些?
2019/08/29 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS