javascript實現的多元素緩衝運動程式碼例項

antzone發表於2017-04-12
JavaScript

本章節分享一段程式碼例項，它實現了多元素緩衝運動效果。

下面就詳細介紹一下它是如何實現的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
li {
  width: 200px;
  height: 100px;
  background: orange;
  list-style: none;
  margin: 10px 0;
  position: relative;
  left: 200px;
}
</style>
 <script type="text/javascript">
window.onload=function(){
  var oUl = document.getElementById('ul');
  var oLi = oUl.getElementsByTagName('li');
  for (var index = 0; index < oLi.length; index++) {
    oLi[index].timer = null;
    oLi[index].onmouseover = function () {
      setMove(this, 100, 'Left');
    }
    oLi[index].onmouseout = function () {
      setMove(this, 200, 'Left');
    }
  }
  function setMove(obj, target, dir) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var speed = (target - obj['offset' + dir]) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if (obj['offset' + dir] == target) {
        clearInterval(obj.timer);
      } else {
        obj.style[dir.toLowerCase()] = obj['offset' + dir] + speed + 'px';
      }
    }, 30)
  }
}
</script>
</head>
<body>
  <div id="div1">
    <ul id="ul">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oUl = document.getElementById('ul')，獲取id屬性值為ul的元素物件。

（3）.var oLi = oUl.getElementsByTagName('li')，獲取li元素集合。

（4）.for (var index = 0; index < oLi.length; index++){}，遍歷每一個li元素。

（5）.oLi[index].timer = null，為當前索引的li元素新增一個timer屬性，並賦值為null。

（6）.oLi[index].onmouseover = function () {

  setMove(this, 100, 'Left');

}，為當前索引的li元素註冊onmouseover事件處理函式。

（7）.oLi[index].onmouseout = function () {

  setMove(this, 200, 'Left');

}，為當前索引的li元素註冊onmouseout事件處理函式。

（8）.function setMove(obj, target, dir) {}，此函式實現了緩衝運動效果，obj規定緩衝運動的元素，第二個引數規定運動的目標尺寸，第三個引數規定運動的方向。

（9）.clearInterval(obj.timer)，停止當前的定時器函式，否則如果多次連續快速滑鼠懸浮或者離開，會導致定時器函式的疊加。

（10）.obj.timer = setInterval(function () {},30)，每隔30毫秒執行一次函式。

（11）.var speed = (target - obj['offset' + dir]) / 6，獲取此時刻的速度。

（12）.speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)，根據速度是否大於0.來執行上舍入或者下舍入。

（13）.if (obj['offset' + dir] == target) {

  clearInterval(obj.timer);

} else {

  obj.style[dir.toLowerCase()] = obj['offset' + dir] + speed + 'px';

}，如果達到目標值，那麼就停止定時器函式，否則就設定元素的對應的left或者right實現運動。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件可以參閱javascript mouseover事件一章節。

（3）.onmouseout事件可以參閱javascript mouseout事件一章節。

（4）.clearInterval()可以參閱clearInterval() 方法一章節。

（5）.setInterval()可以參閱setInterval()一章節。

（6）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（7）.Math.floor()可以參閱javascript Math.floor()一章節。

（8）.offsetLeft可以參閱offsetleft一章節。

相關文章