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)
       }
  • 相关阅读:
    js代码与html代码分离示例
    day24_Nginx学习笔记
    bookStore商城开发文档
    API Management Architecture Notes
    Taking A Fresh Look At What Open Source API Management Architecture Is Available
    使用API Gateway
    Qcon2017实录|Service Mesh:下一代微服务
    聊聊 API Gateway 和 Netflix Zuul
    项目长期运维中产生的一些问题
    忆情天书的由来
  • 原文地址:https://www.cnblogs.com/mc67/p/5195751.html
Copyright © 2011-2022 走看看