首页 > 代码库 > js动画(速度)

js动画(速度)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Cache-Control" content="no-transform" />
<style>
*{margin:0px;}
#div1{width:200px;height:200px;position: absolute;left:-200px;background: #0f0}
#div1 span{width:20px;height:50px;position: absolute;top: 80px;left:200px;background: #0ff}
</style>
<script>
  window.onload = function(){
    var odiv1 = document.getElementById("div1");
     odiv1.onmouseover = function(){
      move(0);
    }
    odiv1.onmouseout = function(){
      move(-200);
    }
  }
  var timer = null;
 function move(mubiao){
    var odiv1 = document.getElementById("div1");
    timer = setInterval( function (){
      var speed = 0;
      if(odiv1.offsetLeft>mubiao){
        speed = -10;
      }else
      {
        speed = 10;
      }
        if(odiv1.offsetLeft == mubiao){
         clearInterval(timer);
       }
         else{
        odiv1.style.left = odiv1.offsetLeft + speed +‘px‘;
         }
    }, 30)
  }
</script>
</head>
<body>
  <div id="div1" ><span></span>
</div>
</body>
</html>

js动画(速度)