zoukankan      html  css  js  c++  java
  • JavaScript多物体运动一

    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)
       }
  • 相关阅读:
    日期 根据所选日期 获取 之后N天的日期
    错误退出登录
    挂载路由导航守卫 router
    缓存 ssessionStorage&localStorage
    vue项目 第三方图标库阿里图库
    码云新建仓库 以及本地上传
    sql的四种连接-左外连接、右外连接、内连接、全连接
    C#中常用修饰符
    接口的隐式和显式实现
    C#break、continue、return、goto
  • 原文地址:https://www.cnblogs.com/mc67/p/5195751.html
Copyright © 2011-2022 走看看