csdnlaiyanqi
DreamsComeTrue1
采纳率80%
2017-03-28 00:54 阅读 915

这是怎么回事,不能让这几个div同时运动

代码如下 :

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-多物体同时运动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload=function()
        {

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

            for(var i=0;i<aDiv.length;i++)
            {
                aDiv[i].timer='null';//定义多个div的定时器

                aDiv[i].onmousemover=function()
                {
                    startMove(this, 400);
                };
                aDiv[i].onmouseout=function()
                {
                    startMove(this, 100);
                };
            }
        };

       function  startMove(obj,iTarget)
      {

          clearInterval(obj.timer);

          obj.timer=setInterval(function()
          {
              var speed=(iTarget-obj.offsetWidth)/6;
              speed=speed>0?Math.ceil(speed):Math.floor(speed);

              if(obj.offsetWidth==iTarget)
              {
                  clearInterval(obj.timer);
              }
              else
              {
                  obj.style.width=obj.offsetWidth+speed+'px';
              }
          },30);
      }
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-03-28 02:52

    onmouseover,不是onmousemover

      aDiv[i].onmouseover/*onmousemover*/ = function () {
    
    点赞 2 评论 复制链接分享
  • csdnlaiyanqi DreamsComeTrue1 2017-03-28 04:12

    谢谢啦!后面我重写了一遍,才发现是这个问题,哎!

    点赞 评论 复制链接分享

相关推荐