js元素挨個掉落程式碼例項

antzone發表於2017-04-17
JS

分享一段程式碼例項，它實現了元素挨個掉落效果。

點選一個元素就可以演示此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  position: absolute;
  transform: rotateZ(360deg);
}
</style>
</head>
<body>
<script type="text/javascript">
var div = document.getElementsByTagName("div");
var len = 20;
var num = 0;
var timer = null;
var str = '';
for (var i = 0; i < len; i++) {
  str += '<div style="width:50px;height:50px;background:purple;position:absolute;left:'
    + i * 60 + 'px;top:10px"></div>'
}
document.body.innerHTML = str;
document.onclick = function() {
  timer = setInterval(function() {
    move(div[num], {
      top: 200
    }, 500, 'linear')
    num++;
    if (num >= len) {
      clearInterval(timer);
      num = 0;
    }
  }, 200)
 
};
/*
 * 呼叫：
 *
 *         move(obj, {left:10,top:20,opacity:0.8}, duration, fx, callback)
 *
 * 第二個引數裡用鍵值對的形式，值沒有單位，opacity的值為0-1
 *
 */
function move(obj, attrs, duration, fx, callback) {
 
  clearInterval(obj.timer);
 
  var startTime = new Date().getTime();
  var j = {};
  for (var attr in attrs) {
    j[attr] = {}
    j[attr].b = parseFloat(getComputedStyle(obj)[attr]);
    j[attr].c = attrs[attr] - j[attr].b;
  }
 
  var d = duration;
  obj.timer = setInterval(function() {
    var t = new Date().getTime() - startTime;
 
    if (t >= d) {
      t = d;
    }
 
    for (var attr in attrs) {
      var b = j[attr].b;
      var c = j[attr].c;
      var value = Tween[fx](t, b, c, d);
      if (attr == 'opacity') {
        obj.style[attr] = value;
      } else {
        obj.style[attr] = value + 'px';
      }
    }
 
    if (t == d) {
      clearInterval(obj.timer);
      if (typeof callback == 'function') {
        callback.call(obj);
      }
    }
  }, 16);
}
 
/*
 * t : time 已過時間
 * b : begin 起始值
 * c : count 總的運動值
 * d : duration 持續時間
 * */
 
//Tween.linear();
 
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;
  },
  easeOut: function(t, b, c, d) { //減速曲線
    return -c * (t /= d) * (t - 2) + b;
  },
  easeBoth: function(t, b, c, d) { //加速減速曲線
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t + b;
    }
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  },
  easeInStrong: function(t, b, c, d) { //加加速曲線
    return c * (t /= d) * t * t * t + b;
  },
  easeOutStrong: function(t, b, c, d) { //減減速曲線
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
  },
  easeBothStrong: function(t, b, c, d) { //加加速減減速曲線
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t * t * t + b;
    }
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
  },
  elasticIn: function(t, b, c, d, a, p) { //正弦衰減曲線（彈動漸入）
    if (t === 0) {
      return b;
    }
    if ((t /= d) == 1) {
      return b + c;
    }
    if (!p) {
      p = d * 0.3;
    }
    if (!a || a < Math.abs(c)) {
      a = c;
      var s = p / 4;
    } else {
      var s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  },
  elasticOut: function(t, b, c, d, a, p) { //正弦增強曲線（彈動漸出）
    if (t === 0) {
      return b;
    }
    if ((t /= d) == 1) {
      return b + c;
    }
    if (!p) {
      p = d * 0.3;
    }
    if (!a || a < Math.abs(c)) {
      a = c;
      var s = p / 4;
    } else {
      var s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
  },
  elasticBoth: function(t, b, c, d, a, p) {
    if (t === 0) {
      return b;
    }
    if ((t /= d / 2) == 2) {
      return b + c;
    }
    if (!p) {
      p = d * (0.3 * 1.5);
    }
    if (!a || a < Math.abs(c)) {
      a = c;
      var s = p / 4;
    } else {
      var s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    if (t < 1) {
      return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
        Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    }
    return a * Math.pow(2, -10 * (t -= 1)) *
      Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
  },
  backIn: function(t, b, c, d, s) { //回退加速（回退漸入）
    if (typeof s == 'undefined') {
      s = 1.70158;
    }
    return c * (t /= d) * t * ((s + 1) * t - s) + b;
  },
  backOut: function(t, b, c, d, s) {
    if (typeof s == 'undefined') {
      s = 3.70158; //回縮的距離
    }
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
  },
  backBoth: function(t, b, c, d, s) {
    if (typeof s == 'undefined') {
      s = 1.70158;
    }
    if ((t /= d / 2) < 1) {
      return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
    }
    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
  },
  bounceIn: function(t, b, c, d) { //彈球減振（彈球漸出）
    return c - Tween['bounceOut'](d - t, 0, c, d) + b;
  },
  bounceOut: function(t, b, c, d) {
    if ((t /= d) < (1 / 2.75)) {
      return c * (7.5625 * t * t) + b;
    } else if (t < (2 / 2.75)) {
      return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
    } else if (t < (2.5 / 2.75)) {
      return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
    }
    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
  },
  bounceBoth: function(t, b, c, d) {
    if (t < d / 2) {
      return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
    }
    return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
  }
}
</script>
</body>
</html>

相關文章