JavaScript多物体运动二

JavaScript多物体运动二

html：

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

css：

<style type="text/css">
 div{
     height:150px;
     width:200px;
     background:green;
     margin-left:10px;
     float:left;
     opacity:0.3; 
     filter:alpha(opacity:30);
 }
</style>

javascript：

<script type="text/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].alpha=30; //添加一个控制透明度的属性滴呀(初始化为30)
          objs[i].onmouseover=function(){
              changeOpacity(this,100);
              //移入的时候，就全部变成完整的颜色
          }
          objs[i].onmouseout=function (){
              //移出的时候，就变回原来的颜色滴呀
              changeOpacity(this,30);
          }
       }
   }

   function changeOpacity(obj,iTarget){
       //一步步的接近面向对象编码方式了滴呀
       clearInterval(obj.Timer);
       obj.Timer=setInterval(function (){
           var speed=(iTarget-obj.alpha)/8;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           if(obj.alpha==iTarget){
               clearInterval(obj.Timer);
           }else{   
               obj.alpha+=speed;
               //考虑到兼容性 
               obj.style.opacity=(obj.alpha)/100;  
               obj.style.filter='alpha(opacity:'+obj.alpha+')';
           }
       },30)
   }

效果：

posted @ 2016-02-17 17:56  咕-咚  阅读(254)  评论(0)  编辑  收藏  举报