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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery 查找元素操作实例小结
Oct 02 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
PHP的中问验证码
2006/11/25 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python数组过滤实现方法
2015/07/27 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
积极分子思想汇报
2014/01/04 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android