首页 > 编程语言 > 详细

JavaScript多物体运动一

时间:2016-02-17 17:20:21      阅读:188      评论:0      收藏:0      [点我收藏+]

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)
   }

效果:

技术分享

 

JavaScript多物体运动一

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!