多物体运动

主要是建立运动框架

框架？

简单理解就是一套操作的模板，
栗子：
把兔子放进冰箱的有几步？
框架就是这些步骤：把冰箱打开，冰箱里的东西清理出来，把物体放进去，最后关冰箱。只是说明了把东西放进冰箱的步骤，而没有说指定到放什么进去，我们应用框架时，就是给这个操作指定放什么进去，兔子、大象爱放啥放啥（传参）

多物体运动

大概思路跟给单个物体设置运动方式差不多，但有几个地方需需要注意。
举个栗子：
希望当鼠标放上去时，物体的宽度变大

<script>
        window.onload = function () {
            var aDiv = document.getElementsByTagName('div');

            for (var i=0; i<aDiv.length; i++) {
                aDiv[i].onmouseover = function () {
                    toMove(this, 200);
                };
                aDiv[i].onmouseout = function () {
                    toMove(this, 100);
                };
            }

        };
        function toMove(obj, iTag) {
            var timer = null;

            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (iTag - obj.offsetWidth)/7;

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

                if (obj.offsetWidth === iTag) {
                    clearInterval(timer);
                }
                else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }

            }, 30);
        }
    </script>

---

问题1：

当鼠标从一个物体移到另一个物体上时，上一个物体的宽没有还原为原来的宽度，甚至宽度抖动

原因：
因为只设置了一个定时器，当鼠标移到另外一个物体上的时候，上一次被启动的定时器就被关掉了，然后又重新打开这个定时器。

也就是说，当你把鼠标从物体1移开的时候，物体的宽度正在还原为原来的宽度（减小），但还没变成原来的宽度，这时你又把鼠标移到物体2，那么此时正在启动的定时器就会被关闭（也就是正在恢复到原来宽度的动作被停止），所以物体1的宽度就会被定格在定时器关闭的时刻

解决：
给每隔运动的物体各自设置一个定时器，定时器间互不干扰

function toMove(obj, iTag) {
           /* var timer = null;*/

            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = (iTag - obj.offsetWidth)/7;

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

                if (Math.abs(iTag - obj.offsetWidth) <7) {
                    clearInterval(obj.timer);
                    obj.style.width = iTag;
                }
                else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }

            }, 30);
        }

问题2：

举个栗子：设置多个物体的淡入淡出（鼠标移上去透明度为1，移出为3）

<script>
    window.onload = function () {
      var aDiv = document.getElementsByTagName('div');

      for (var i=0; i<aDiv.length; i++) {
          aDiv[i].onmouseover = function () {
              toMove(this, 100);
          };
          aDiv[i].onmouseout = function () {
              toMove(this, 30);
          };
      }
    };
    var alpha = 30;
    function toMove(obj, iTag) {
        clearInterval(obj.timer);

        obj.timer = setInterval(function () {
            var speed = (iTag - alpha)/7;

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

            if (iTag - alpha < 7) {
                clearInterval(obj.timer);
                obj.style.opacity = iTag/100;
                obj.style.filter = 'alpha(opacity:' + iTag + ')';
            }
            else {
                obj.style.opacity = alpha/100;
                obj.style.filter = 'alpha(opacity:' + alpha + ')';
            }
        }, 30);
    }
  </script>

出现问题： 鼠标从物体1移到物体2时，两个物体的透明的不是设置的透明度（明显可看见）

原因：
设置了一个alpha=30， 当鼠标从物体1移开时，alpha在减小，又移到物体2时，alpha在增大，所以alpha的值就出现了问题（alpha说：我tm到底是变大还是变小？）,这个问题其实跟上面的问题差不多，就是共用了同一个东西。

解决：给每个物体设置单独的alpha

 aDiv[i].alpha = 30;

总结

在多物体运动框架里，所有东西都不能公用