问答详情
源自:2-1 JS速度动画

求助,为什鼠标必须在蓝色部分才向前运动啊???鼠标移入不应该是一次触发,应该到鼠标移动前都执行这个动作么???代码和老师一样,为什么我不能像老师一样运动啊???

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>速度动画</title> 

<style type="text/css">

*{margin: 0;padding: 0}

#big {height: 200px;width:200px;background-color: red;position: relative;left: -200px;top: 10px}

#big span{height: 20px;width:50px;background-color: blue;position: absolute;cursor: pointer;top: 85px;left:200px;}

    </style>

   <script>

    var timer=null;

   var speed=0;

     window.onload=function(){

     var start=document.getElementById("s");

     start.onmouseover=function(){

          forth(0);

     }

     start.onmouseout=function(){

        back(-200);

     }

 }


     function forth(target){

      clearInterval(timer);

      var big=document.getElementById("big");

      timer=setInterval(function(){

      if(big.offsetLeft<target){

      speed=10;

      }

       else{

      speed=-10;

      }


       if(big.offsetLeft==target){

      clearInterval(timer);

      }

      else{

                 big.style.left=big.offsetLeft+speed+'px';

      }

      },50)

     }


      function back(target){

       clearInterval(timer);

       var big=document.getElementById("big");

      timer=setInterval(function(){

      if(big.offsetLeft<target){

      speed=10;

      }

      else {

      speed=-10;

      }

      if(big.offsetLeft==target){

      clearInterval(timer);

      }

      else{

                 big.style.left=big.offsetLeft+speed+'px';

      }

     

      },50)

     }

   

   </script>

</head>

<body>

<div id="big"><span id="s">开始</span></div>


</body>

</html>


鼠标移入蓝色部分物体开始运动,但是当蓝色部分将要离开鼠标的时候(鼠标不动,物体向前运动)就不向前了,就开始向前向后患者来????

https://img3.mukewang.com/5c792b7c0001f1fc01310222.jpg

提问者:太阳会发光呀 2019-03-01 20:53

个回答

  • 慕数据0028241
    2019-03-08 22:46:28

    你的鼠标移入移出事件是绑定在蓝色部分的,而蓝色部分是包含在div里的;你换成绑定在big上 就好了