JavaScript多物体运动一

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mc67/p/5195751.html

文章标签：

#javascript #ViewUI

本文介绍使用JavaScript实现多个HTML元素动态调整宽度的方法。通过监听鼠标悬停事件，结合定时器和面向对象思想，使每个元素能独立地平滑过渡到目标宽度。文章最后修复了一个与offsetWidth属性相关的bug，并提供了完整的修复代码。

JavaScript多物体运动一

html：

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

css：

 div{
     height:30px;
     width:50px;
     background:green;
     margin:10px;
 }

javascript：

//物体多了，就要考虑到我们的面向对象的方式来实现滴呀 
  window.onload=function (){
       var objs=document.getElementsByTagName('div');
       var len=objs.length;
       for(var i=0;i<len;i++){
          objs[i].Timer=null; //添加一个定时器的属性
          objs[i].onmouseover=function(){
              moreMove(this,400);
          }
          objs[i].onmouseout=function (){
              moreMove(this,50);
          }
       }
   }
   function moreMove(obj,iTarget){
       //一步步的接近面向对象编码方式了滴呀
      clearInterval(obj.Timer);
      obj.Timer=setInterval(function (){
           var speed=(iTarget-obj.offsetWidth)/8;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           if(obj.offsetLeft==iTarget){
             clearInterval(obj.Timer);
           }else{
             obj.style.width=obj.offsetWidth+speed+'px';
             
           }
      },30)
   }

效果：

这段效果，还是有一个bug的，是关于offsetWidth的，具体的请看， JavaScript中width和offsetWidth的区别（动画中）

经过修复后的源代码：

 function getStyle(obj,name){
         if(obj.currentStyle!=undefined){
            return obj.currentStyle[name];
         }else{
             return getComputedStyle(obj,false)[name];
         }
     }
   function moreMove(obj,iTarget){
       //一步步的接近面向对象编码方式了滴呀
      clearInterval(obj.Timer);
      obj.Timer=setInterval(function (){
          var width=parseInt(getStyle(obj,'width'));
           var speed=(iTarget-width)/8;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           if(obj.offsetLeft==iTarget){
             clearInterval(obj.Timer);
           }else{
             obj.style.width=width+speed+'px';
             
           }
      },30)
   }