新人求助，如何实现多个移动元素鼠标放入某个时停止，离开继续移动？

做了很多会动的球球，但是怎么做到鼠标进入某个球时，停止定时器，离开继续按照原路径移动。
废话不多说，直接上代码吧。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>散乱的小球球</title>
<style>
*{margin:0;padding:0;}
div{width:200px;height:200px;border-radius:50%;position:absolute;left:0;top:0;}
</style>
</head>
<body>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div></body>
<script> var divs = document.getElementsByTagName('div');
var dodo;
function rand (m , n) {
return Math.floor(Math.random() * (n - m + 1)) + m ;
}
function rang (m , n) {
return Math.random() * (n - m + 1) + m ;
} function changeBg (obj) {
obj.style.background = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')';
} function run (ball){ var stepX = rang(1,10);
var stepY = rang(1,10);
var a = rang(50,200);
ball.style.background = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')';
ball.style.width = a +'px';
ball.style.height = a +'px';
ball.style.left = rand(0,100) +'%';
ball.style.top = rand(0,100) +'%'; dodo = setInterval(function() {
var newLeft = ball.offsetLeft + stepX;
var newTop = ball.offsetTop + stepY; var cW = document.documentElement.clientWidth - stepX;
var cH = document.documentElement.clientHeight - stepY; if (newLeft >= cW - ball.offsetWidth) {
newLeft = cW - ball.offsetWidth;
stepX *= -1;
changeBg(ball);
}
if (newLeft <= Math.abs(stepX)){
newLeft = Math.abs(stepX);
stepX *= -1;
changeBg(ball);
}
if (newTop >= cH - ball.offsetHeight) {
newTop = cH - ball.offsetHeight;
stepY *= -1;
changeBg(ball);
}
if (newTop <= Math.abs(stepY)){
newTop = Math.abs(stepY);
stepY *= -1;
changeBg(ball);
}
ball.style.left = newLeft + 'px';
ball.style.top = newTop + 'px';

},50) } for (i = 0; i<divs.length; i++) {
run(divs[i]);

}
divs[i].onmouseover = function () {
clearInterval(dodo);
}
divs[i].onmouseout = function () {
run();
}</script>
</html>

解决方案 »

  1.   


    var divs = document.getElementsByTagName('div');
    var dodo;
    function rand(m, n) {
        return Math.floor(Math.random() * (n - m + 1)) + m;
    }
    function rang(m, n) {
        return Math.random() * (n - m + 1) + m;
    }function changeBg(obj) {
        obj.style.background = 'rgb(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
    }function run(ball) {    var stepX = rang(1, 10);
        var stepY = rang(1, 10);
        var a = rang(50, 200);
        ball.style.background = 'rgb(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
        ball.style.width = a + 'px';
        ball.style.height = a + 'px';
        ball.style.left = rand(0, 100) + '%';
        ball.style.top = rand(0, 100) + '%';
    ball.pause = false;    ball.dodo = setInterval(function() {
    if(ball.pause) return;        var newLeft = ball.offsetLeft + stepX;
            var newTop = ball.offsetTop + stepY;        var cW = document.documentElement.clientWidth - stepX;
            var cH = document.documentElement.clientHeight - stepY;        if (newLeft >= cW - ball.offsetWidth) {
                newLeft = cW - ball.offsetWidth;
                stepX *= -1;
                changeBg(ball);
            }
            if (newLeft <= Math.abs(stepX)) {
                newLeft = Math.abs(stepX);
                stepX *= -1;
                changeBg(ball);
            }
            if (newTop >= cH - ball.offsetHeight) {
                newTop = cH - ball.offsetHeight;
                stepY *= -1;
                changeBg(ball);
            }
            if (newTop <= Math.abs(stepY)) {
                newTop = Math.abs(stepY);
                stepY *= -1;
                changeBg(ball);
            }
            ball.style.left = newLeft + 'px';
            ball.style.top = newTop + 'px';    },
        50)}for (i = 0; i < divs.length; i++) {
    (function(i){
    run(divs[i]);
    divs[i].onmouseover = function() {
    divs[i].pause = true;
    }
    divs[i].onmouseout = function() {
    divs[i].pause = false;
    }
    })(i);
    }
      

  2.   

     function run(ball,restart) {
            if (!restart) {
                ball.stepX = rang(1, 10);
                ball.stepY = rang(1, 10);
                var a = rang(50, 200);            ball.style.background = 'rgb(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
                ball.style.width = a + 'px';
                ball.style.height = a + 'px';
                ball.style.left = rand(0, 100) + '%';
                ball.style.top = rand(0, 100) + '%';
            }
            ball.dodo = setInterval(function () {
                var newLeft = ball.offsetLeft + ball.stepX;
                var newTop = ball.offsetTop + ball.stepY;            var cW = document.documentElement.clientWidth - ball.stepX;
                var cH = document.documentElement.clientHeight - ball.stepY;            if (newLeft >= cW - ball.offsetWidth) {
                    newLeft = cW - ball.offsetWidth;
                    ball.stepX *= -1;
                    changeBg(ball);
                }
                if (newLeft <= Math.abs(ball.stepX)) {
                    newLeft = Math.abs(ball.stepX);
                    ball.stepX *= -1;
                    changeBg(ball);
                }
                if (newTop >= cH - ball.offsetHeight) {
                    newTop = cH - ball.offsetHeight;
                    ball.stepY *= -1;
                    changeBg(ball);
                }
                if (newTop <= Math.abs(ball.stepY)) {
                    newTop = Math.abs(ball.stepY);
                    ball.stepY *= -1;
                    changeBg(ball);
                }
                ball.style.left = newLeft + 'px';
                ball.style.top = newTop + 'px';        }, 50)    }    for (i = 0; i < divs.length; i++) {
            run(divs[i]);
            divs[i].onmouseover = function () {
                clearInterval(this.dodo);
            }
            divs[i].onmouseout = function () {
                run(this,true);
            }
        }
    Web开发学习资料推荐
    easyui开发技巧
    easyui datebox设置日期范围
      

  3.   

    停止计时器是不是太浪费了<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>散乱的小球球</title>
      <style>
      *{margin:0;padding:0;}
      div{width:200px;height:200px;border-radius:50%;position:absolute;left:0;top:0;}
    </style>
    </head>
    <body>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div></body>
    <script>  var divs = document.getElementsByTagName('div');
      function rand (m , n) {
        return Math.floor(Math.random() * (n - m + 1)) + m ;
      }
      function rang (m , n) {
        return Math.random() * (n - m + 1) + m ;
      }  function changeBg (obj) {
        obj.style.background = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')';
      }  function run (ball){
        var stepX = rang(1,10);
        var stepXcache = stepX;
        var stepY = rang(1,10);
        var stepYcache = stepY;
        var a = rang(50,200);
        ball.style.background = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')';
        ball.style.width = a +'px';
        ball.style.height = a +'px';
        ball.style.left = rand(0,100) +'%';
        ball.style.top = rand(0,100) +'%';    setInterval(function() {
          var newLeft = ball.offsetLeft + stepX;
          var newTop = ball.offsetTop + stepY;      var cW = document.documentElement.clientWidth - stepX;
          var cH = document.documentElement.clientHeight - stepY;      if (newLeft >= cW - ball.offsetWidth) {
            newLeft = cW - ball.offsetWidth;
            stepX *= -1;
            changeBg(ball);
          }
          if (newLeft <= Math.abs(stepX)){
            newLeft = Math.abs(stepX);
            stepX *= -1;
            changeBg(ball);
          }
          if (newTop >= cH - ball.offsetHeight) {
            newTop = cH - ball.offsetHeight;
            stepY *= -1;
            changeBg(ball);
          }
          if (newTop <= Math.abs(stepY)){
            newTop = Math.abs(stepY);
            stepY *= -1;
            changeBg(ball);
          }
          ball.style.left = newLeft + 'px';
          ball.style.top = newTop + 'px';    },50);    ball.onmouseover = function () {
          stepX = 0;
          stepY = 0;
        }    ball.onmouseleave = function () {
          stepX = stepXcache;
          stepY = stepYcache;
        }
      }  for (var i = 0; i<divs.length; i++) {
        run(divs[i]);
      }
      </script>
    </html>