JS多物体宽度运动案例

任务

对于每一个Div区块，鼠标移入，宽度逐渐变宽，最宽值为400px，当鼠标移除时，宽度逐渐减小，最小值为100px。

任务提示：

(1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器，避免多定时器干扰。

(2)每个物体都要有单独的定时器，避免公用定时器导致相互掣肘。

JS多物体宽度变化小案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>JS小案例：多物体变宽</title>
  <style>
    body {
      height: 2000px;
      margin: 0px;
    }

    div {
       100px;
      height: 50px;
      background: red;
      margin: 10px;
    }
  </style>
  <script>
//补充代码
  </script>
</head>

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

　　参考代码

/* 鼠标移入，宽度变为400px，鼠标移出，宽度恢复为100px */

function changeWidth(obj, iTarget) {
    //  开始定时器前清除该物体上的定时器，确保每次物体上作用的只有一个定时器
    clearInterval(obj.timer);
    // 开启定时器，为物体的DOM对象添加自定义的timer属性，属性值为定时器返回ID，这样可以保证每个物体上的定时器返回ID不同，避免相互之间干扰。
    obj.timer = setInterval(function () {

        var speed = (iTarget - obj.offsetWidth) / 6;

        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);


        if (Math.abs(iTarget - obj.offsetWidth) <= speed) {

            obj.style.width = iTarget + 'px';

            clearInterval(obj.timer);

        } else {

            obj.style.width = obj.offsetWidth + speed + 'px';

        }

    }, 30)
}

window.onload = function () {

    var aDiv = document.getElementsByTagName('div');

    for (var i = 0; i < aDiv.length; i++) {

        aDiv[i].onmouseover = function () {

            changeWidth(this, 400);

        }

        aDiv[i].onmouseout = function () {

            changeWidth(this, 100);
        }
    }
}