javascript多物体运动元素共享？no-CSDN博客

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js动画多物体运动</title>
    <style type="text/css">
     ul li{
        width: 200px;
        height: 100px;
        margin-bottom: 20px;
        background: yellow;
        border: 5px solid #000;
      }
    </style>
    
    <script type="text/javascript">
    
window.onload=function(){
    var ali=document.getElementsByTagName('li');
    for (var i = 0; i < ali.length; i++) {
      ali[i].timer=null;//给每个li单独定义定时器
      ali[i].onmouseover=function(){
        startmove(this,400);
      }
      ali[i].onmouseout=function(){
        startmove(this,200);
      }
    };
   }

   //当然，运动函数也可以封装，下一篇博文我们将它封装起来
   function startmove(obj,itarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var icur=parseInt(getStyle(obj,"width"));//用函数获取自身的宽度

      var speed=(itarget-icur)/10;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);//有运动有除法的地方一定要取整。
    
    if (itarget==icur) {
      clearInterval(obj.timer);
    }else{
      obj.style.width=parseInt(getStyle(obj,"width"))+speed+"px";
    }
      },30);
   }

   function getStyle(obj,attr){ //封装函数
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      }else{
        return getComputedStyle(obj,false)[attr];
      };
   }

</script>
<body>
    <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

转载于:https://my.oschina.net/u/2617389/blog/608120