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

讓div運(yùn)動起來 js實現(xiàn)緩動效果

 更新時間:2017年07月06日 09:11:02   作者:風(fēng)雨后見彩虹  
讓div運(yùn)動起來,這篇文章主要介紹了js實現(xiàn)緩動效果的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)緩動效果的具體代碼,供大家參考,具體內(nèi)容如下

var tween = {
  linear:function(t,b,c,d){
    return c*t/d + b;
  },
  easeIn:function(t,b,c,d){
    return c * ( t /= d ) * t + b;
  },
  strongEaseIn:function(t,b,c,d){
    return c * ( t /= d ) * t * t * t * t + b;
  },
  strongEaseOut:function(t,b,c,d){
    return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
  },
  sineaseIn:function(t,b,c,d){
    return c * ( t /= d ) * t * t + b;  
  },
  sineaseOut:function(t,b,c,d){
    return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
  }
};

var Animate = function(dom){
  this.dom = dom;
  this.startTime = 0;
  this.startPos = 0;
  this.endPos = 0;
  this.propertyName = null;
  this.easing = null;
  this.duration = null;
}

Animate.prototype.start = function(propertyName,endPos,duration,easing){
  this.startTime = +new Date;
  this.startPos = this.dom.getBoundingClientRect()[propertyName];
  this.propertyName = propertyName;
  this.endPos = endPos;
  this.duration = duration;
  this.easing = tween[easing];

  var self = this;
  var timeId = setInterval(function(){
    if(self.step() === false){
      clearInterval(timeId);
    }
  },19);
}

Animate.prototype.step = function(){
  var t = +new Date;
  if(t>=this.startTime + this.duration){
    this.update(this.endPos);
    return false;
  }
  var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
  this.update(pos);
}

Animate.prototype.update = function(pos){
  this.dom.style[this.propertyName] = pos + 'px';
}

var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'strongEaseOut');

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論