当前位置:首页 > 日记 > 正文

利用原生JS与jQuery实现数字线性变化的动画

利用原生JS与jQuery实现数字线性变化的动画

前言

大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据。于是有了下文。

在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件。

数字线性变化的原理很简单,就是让数字增量变化,并循环动画。

原生JS版

首先获取DOM元素。为了兼容到IE6,兼容性方法如下:

var domUtil = { // 获取DOM元素 get: function(query) {  var _this = this;  if(document.querySelector) {   return document.querySelector(query);  } else {   var elements = document;   var queryStrArray = query.split(/ +/);   for(var i = 0; i < queryStrArray.length; i++) {    var domName = queryStrArray[i];    elements = _this.getElementsOfParentNode(domName, elements);   }   if(elements.length == 1) {    return elements[0];   } else {    return elements;   }  } }, // 获取DOM元素 getElementsOfParentNode: function(domName, parentNode) {  var _this = this;  parentNode = parentNode || document;  domName = domName.trim();  var regExps = {   id: /^#/,   class: /^/  };  if(regExps.id.test(domName)) {   domName = domName.replace(/^\#/g, "");   return parentNode.getElementById(domName);  } else if(regExps.class.test(domName)) {   domName = domName.replace(/^./g, "");   return _this.getElementsByClassName(domName, parentNode);  } else {   return parentNode.getElementsByTagName(domName);  } }, // 获取class元素的兼容方法 getElementsByClassName: function(className, parentNode) {  if(parentNode.getElementsByClassName){   return parentNode.getElementsByClassName(className);  } else {   className = className.replace(/^ +| +$/g,"");   var classArray = className.split(/ +/);   var eles = parentNode.getElementsByTagName("*");   for(var i = 0;i < classArray.length; i++){    var classEles = [];    var reg = new RegExp("(^| )" + classArray[i] + "( |$)");    for(var j = 0;j < eles.length; j++){     var ele = eles[j];     if(reg.test(ele.className)){      classEles.push(ele);     }    }    eles = classEles;   }   return eles;  } }};
/* * 数字动画(目前仅支持数字动画的线性变化) * options参数: *  element {String} DOM元素query字符串 *  from {Number} 起始数字 *  to {Number} 终点数字 *  duration {Number} 动画时间 *  callback {Function} 数字变化时的回调函数 */var animatingNumber = function(options) { this.element = domUtil.get(options.element); this.startNum = options.from; this.endNum = options.to; this.duration = options.duration || 2000; this.callback = options.callback; this.timer = null;};animatingNumber.prototype = { start: function() {  var _this = this;  _this.animate(); }, stop: function() {  if(this.timer) {   clearTimeout(this.timer);   this.timer = null;  } }, animate: function() {  var _this = this;  var curNum = _this.startNum;  var animateTime = 0;  var range = _this.endNum - _this.startNum;  var timerStep = Math.abs( Math.floor(_this.duration / range) );  timerStep = timerStep > 20 ? timerStep : 20;  var numStep = (range / _this.duration) * timerStep;  _this.stop();  (function animate() {   _this.timer = setTimeout(function() {    curNum = Math.ceil( curNum + numStep );    if( (_this.endNum > _this.startNum && curNum >= _this.endNum) || (_this.endNum < _this.startNum && curNum <= _this.endNum) ) {     curNum = _this.endNum;    }    _this.element.innerText = curNum;    animateTime++;    if(typeof this.callback == 'function') {     this.callback(curNum);    }    animate();    if(curNum >= _this.endNum) {     _this.stop();    }   }, timerStep);  })(); }};animatingNumber.create = function(options) { return new animatingNumber(options);};

使用:

<p>Number: <span class='dynamicNum'>500</span></p><script> animatingNumber.create({  element: '.dynamicNum',  from: 1,  to: 500,  duration: 2000 }).start();</script>

jQuery插件版

原理同上,只是DOM元素获取使用jQuery方法,并把数字动画方法封装成jQuery插件。

如下:

/* * 数字动画(目前仅支持数字动画的线性变化) * options参数: *  from {Number} 起始数字 *  to {Number} 终点数字 *  duration {Number} 动画时间 *  callback {Function} 数字变化时的回调函数 */(function( $ ) { $.fn.animatingNumber = function(options) {  var settings = {   element: this,   startNum: options.from,   endNum: options.to,   duration: options.duration || 2000,   callback: options.callback  };  var timer = null;  var methods = {   start: function() {    var _this = this;    _this.animate();   },   stop: function() {    if(timer) {     clearTimeout(timer);     timer = null;    }   },   animate: function() {    var _this = this;    var curNum = settings.startNum;    var animateTime = 0;    var range = settings.endNum - settings.startNum;    var timerStep = Math.abs( Math.floor(settings.duration / range) );    timerStep = timerStep > 20 ? timerStep : 20;    var numStep = (range / settings.duration) * timerStep;    _this.stop();    (function animate() {     timer = setTimeout(function() {      curNum = Math.ceil( curNum + numStep );      if( (settings.endNum > settings.startNum && curNum >= settings.endNum) || (settings.endNum < settings.startNum && curNum <= settings.endNum) ) {       curNum = settings.endNum;      }      settings.element.text(curNum);      animateTime++;      if(typeof settings.callback == 'function') {       settings.callback(curNum);      }      animate();      if(curNum >= settings.endNum) {       _this.stop();      }     }, timerStep);    })();   }  };  return this.each(function() {   return methods.start();  }); };})( jQuery );

使用:

<p>Number: <span class='dynamicNum'></span></p><script>$('.dynamicNum').animatingNumber({ from: 1, to: 1000, duration: 2000});</script>

最后

好了,以上就是这篇文章的全部内容了,后期会考虑加上缓动函数的选择项。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

jQuery dateRangePicker插件使用方

jQuery dateRangePicker插件使用方

插件,使用方法,详解,电脑软件,jQuery,jQuery dateRangePicker插件使用总结。版本说明:当前使用版本:2.1.25特别说明:版本不同,部分api可能会发生变化,需要引起重点关注效果图关键代码片段$("#dateTimeRange span").html(moment().subtract(1, …

javascript 取小数点后几位几种方

javascript 取小数点后几位几种方

点后,小数,几位,几种方法,电脑软件,javascript 取小数点后几位方法总结Javascript取float型小数点后两位,例22.123456取成22.12,如何做?1.通过substring截取。function getnum(){var num = 22.123456;var result = num.substring(0,s.indexOf…

EasyUI Tree树组件无限循环的解决

EasyUI Tree树组件无限循环的解决

无限循环,解决方法,组件,电脑软件,EasyUI,在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环。如:tree.json[{ "id":1, …

ppt2010怎么设置上下标ppt2010设置

ppt2010怎么设置上下标ppt2010设置

设置,下标,步骤,标的,电脑软件,  ppt说起来不是很难,但多少人将它学到精髓就不知道了,俗话说:书到用时方恨少,我们平时可能觉得ppt很简单哦,都会。但有时候自己很忙时,突然有个地方不会了,怎么办?自己肯定急的像一个热窝的蚂蚁,所以我们学什么东…

如何给Word2010文档加密及取消加密

如何给Word2010文档加密及取消加密

加密,文档,取消,电脑软件,  当我们做完一篇文档后,有没有想过要给它加密呢?这样可以保护文档的内容,不容易泄露出去。那么麻烦的时候,也可以取消加密。以下是小编为您带来的关于给Word2010文档加密及取消加密,希望对您有所帮助。给Word2010文…

PS笔刷绘制蜡笔肌理插画

PS笔刷绘制蜡笔肌理插画

绘制,肌理,插画,蜡笔,笔刷,这篇教程教的PS鼠绘学习者们使用PS笔刷模拟蜡笔肌理效果,教程难度一般,但是对于学习PS鼠绘特别是笔刷的运用是非常好的,推荐过来和的朋友们一起分享,一起学习了,先来看看最终的效果图吧:12 阅读全文教程结束,以上就是PS…

jQuery制作旋转效果

jQuery制作旋转效果

效果,电脑软件,jQuery,以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的:其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下:(1)先定义好图片旋转的半径(2)图片旋转的过程…

怎样将word转换成PPT格式

怎样将word转换成PPT格式

步骤,转换成,格式,电脑软件,word,  在日常的工作生活中,我们经常需要借助于Word办公软件来编辑、打印文档材料。许多时候,我们可能还需要将已经编辑好的Word文档打印出来,然后制做成PowerPoint格式演示文稿,以便进行演示。不过,我们在Powe…

微信读书如何添加本地文件?

微信读书如何添加本地文件?

本地文件,电脑软件,  微信读书是一款可以看到朋友圈好友阅读时间及最近阅读书籍的应用软件,很多下载了该应用的朋友们都不清楚怎么将本地图书导入到微信读书里面,针对此问题,本文就为大家进行解答。微信读书如何添加本地文件  微信读书刚…

微信小程序中使用javascript 回调

微信小程序中使用javascript 回调

回调函数,程序,电脑软件,微信小,javascript, 微信小程序中使用javascript 回调函数回调函数原理:我现在出发,到了通知你” 这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后…

ppt自选图形在哪怎么插入

ppt自选图形在哪怎么插入

图形,方法,电脑软件,ppt,  在ppt设计和制作中常常需要插入图形,为了更好地实现自己想要的效果,我们可以在ppt中插入自选图形,下面就让小编告诉你 ppt2013如何插入自选图形的方法,不懂的朋友会请多多学习ppt哦。ppt2013插入自选图形的方法打开…

在点击div中的p时,如何阻止事件冒泡

在点击div中的p时,如何阻止事件冒泡

事件冒泡,电脑软件,div,今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者。我还是以一个案例来说明问题,html代码如下:<div onclick="show('a')"> <p …