                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

鼠标放上去没反应

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   *{
       margin: 0;
       padding: 0;
   }

   #div1{
       width: 200px;
       height: 300px;
       background-color: yellow;
   }

   </style>
   <script type="text/javascript">
       window.onload = function(){
           var div1 = document.getElementById("div1");
           div1.onmouseover = function(){
               startMove(0);
           }

           div1.onmouseout = function(){
               startMove(-200);
           }
       }

       var timer = null;
       function startMove(itarget){
           clearInterval(time);
           var div1 = document.getElementById('div1');
           timer = setInterval(function(){
               var speed = (itarget-div1.offsetLeft)/20;
               speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
               if(div1.offsetLeft == itarget){
                   clearInterval(timer);
               }else{
                   div1.style.left = div1.offsetLeft + speed + 'px';
               }

           }, 30)
       }

   </script>
</head>
<body>
   <div id="div1"></div>

</body>
</html>