欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫

 更新時間：2017年02月24日 09:46:06   作者：子匠_Zijor  
最近在工作中遇到一個需要，需要將數(shù)字實現(xiàn)遞增的動態(tài)顯示，從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實現(xiàn)，suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實現(xiàn)數(shù)字線性變化動畫的相關(guān)資料，需要的朋友可以參考下。

前言

大家應(yīng)該都有所體會，在一些數(shù)據(jù)展示的專題頁里，有時候希望數(shù)字能動態(tài)從某一個數(shù)變化到另一個數(shù)，以此來吸引用戶眼球，突出數(shù)據(jù)。于是有了下文。

在這里，我用了兩種方式：一種是原生的JavaScript，另一種是jQuery插件。

數(shù)字線性變化的原理很簡單，就是讓數(shù)字增量變化，并循環(huán)動畫。

原生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;
  }
 }
};
/*
 * 數(shù)字動畫（目前僅支持?jǐn)?shù)字動畫的線性變化）
 * options參數(shù)：
 *  element {String} DOM元素query字符串
 *  from {Number} 起始數(shù)字
 *  to {Number} 終點數(shù)字
 *  duration {Number} 動畫時間
 *  callback {Function} 數(shù)字變化時的回調(diào)函數(shù)
 */
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方法，并把數(shù)字動畫方法封裝成jQuery插件。

如下：

/*
 * 數(shù)字動畫（目前僅支持?jǐn)?shù)字動畫的線性變化）
 * options參數(shù)：
 *  from {Number} 起始數(shù)字
 *  to {Number} 終點數(shù)字
 *  duration {Number} 動畫時間
 *  callback {Function} 數(shù)字變化時的回調(diào)函數(shù)
 */
(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>

最后

好了，以上就是這篇文章的全部內(nèi)容了，后期會考慮加上緩動函數(shù)的選擇項。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評論