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

来源:2-1 JS速度动画

太阳会发光呀

2019-03-01 20:53

<!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

写回答 关注

1回答

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

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

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题