编程 Javascript

javascript关于运动的各种问题经典总结

Posted in Javascript onApril 27, 2015

本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：

一、JS运动的各种问题

问题一：

错误代码：

function startMove(){ 
 var timer=null; 
 var div1=document.getElementById("div1"); 
 if (div1.offsetLeft==300){ 
  clearInterval(timer); 
 }else{ 
  timer=setInterval(function(){ 
   div1.style.left=div1.offsetLeft+10+"px"; 
  },30) 
 } 
}

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

var timer=null; 
function startMove(){ 
 var div1=document.getElementById("div1"); 
 timer=setInterval(function(){ 
  if (div1.offsetLeft==300){ 
   clearInterval(timer); 
  } 
  div1.style.left=div1.offsetLeft+10+"px"; 
 },30) 
}

问题二:
错误代码：

function startMove(){ 
 var speed=1; 
 var timer=null; 
 var oDiv1=document.getElementById("div1"); 
 clearInterval(timer); 
 timer=setInterval(function(){ 
  if (oDiv1.offsetLeft>=300){ 
   clearInterval(timer); 
  }else{ 
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
  } 
 },30) 
}

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。
错误之处：
将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

var timer=null; 
function startMove(){ 
 var speed=1; 
 var oDiv1=document.getElementById("div1"); 
 clearInterval(timer); 
 timer=setInterval(function(){ 
  if (oDiv1.offsetLeft>=300){ 
   clearInterval(timer); 
  }else{ 
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
  } 
 },30) 
}

实现分享栏进出功能：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 150px; 
   height: 200px; 
   background: burlywood; 
   position: absolute; 
   left: -150px; 
  } 
  span{ 
   width: 20px; 
   height: 60px; 
   position: absolute; 
   background: gold; 
   right: -20px; 
   top: 70px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(0); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(-150); 
   }; 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   if (oDiv1.offsetLeft<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    if(oDiv1.offsetLeft==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"> 
 <span id="span1">分享到</span> 
</div> 
</body> 
</html>

实现图片淡入淡出功能：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  #div1{ 
   width: 200px; 
   height: 200px; 
   background: red; 
   position: absolute; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(100); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(30); 
   }; 
  }; 
  var timer=null; 
  var alpha=30; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   clearInterval(timer); 
   if(alpha<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   timer=setInterval(function(){ 
    if (alpha==target){ 
     clearInterval(timer); 
    }else{ 
     alpha+=speed; 
     oDiv1.style.filter="alpha(opacity:"+alpha+")"; 
     oDiv1.style.opacity=alpha/100; 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"> 
</div> 
</body> 
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；
chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 100px; 
   height: 100px; 
   background: yellowgreen; 
   position: absolute; 
   bottom: 0px; 
   right: 0px; 
  } 
 </style> 
 <script> 
  window.onscroll=function(){ 
   var oDiv=document.getElementById("div1"); 
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
   move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv=document.getElementById("div1"); 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    var speed=(target-oDiv.offsetTop)/10; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (oDiv.offsetTop==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv.style.top=oDiv.offsetTop+speed+'px'; 
    } 
   },30) 
  }; 
 </script> 
</head> 
<body style="height:2000px;"> 
<div id="div1"></div> 
</body> 
</html>

二、JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 100px; 
   height: 50px; 
   background: yellow; 
   margin: 10px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for (var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].onmouseover=function(){ 
     move(300,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(100,this); 
    }; 
   } 
  }; 
  function move(iTarget,oDiv){ 
   clearInterval(oDiv.timer); 
   oDiv.timer=setInterval(function(){ 
    var speed=(iTarget-oDiv.offsetWidth)/5; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (iTarget==oDiv.offsetWidth){ 
     clearInterval(oDiv.timer); 
    }else{ 
     oDiv.style.width=oDiv.offsetWidth+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
</body> 
</html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 200px; 
   height: 200px; 
   margin: 10px; 
   background: yellow; 
   float: left; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for(var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].alpha=30; 
    oDiv[i].onmouseover=function(){ 
     move(100,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(30,this); 
    }; 
   } 
  }; 
  function move(iTarget,obj){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var speed=(iTarget-obj.alpha)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (obj.alpha==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     obj.alpha+=speed; 
     obj.style.filter="alpha(opacity:"+obj.alpha+")"; 
     obj.style.opacity=obj.alpha/100; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</body> 
</html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 100px; 
   height: 100px; 
   margin: 10px; 
   background: yellow; 
   float: left; 
   border: 10px solid black; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById('div1'); 
   var oDiv2=document.getElementById('div2'); 
   oDiv1.timer=null; 
   oDiv2.timer=null; 
   oDiv1.onmouseover=function(){ 
    move(this,400,'height'); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(this,100,'height'); 
   }; 
   oDiv2.onmouseover=function(){ 
    move(this,400,'width'); 
   }; 
   oDiv2.onmouseout=function(){ 
    move(this,100,'width'); 
   }; 
  }; 
  function getStyle(obj,name){ 
   if(obj.currentStyle){ 
    return obj.currentStyle[name]; 
   }else{ 
    return getComputedStyle(obj,false)[name]; 
   } 
  }; 
  function move(obj,iTarget,name){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var cur=parseInt(getStyle(obj,name)); 
    var speed=(iTarget-cur)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if(cur==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     obj.style[name]=cur+speed+"px"; 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
</body> 
</html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  #div1{ 
   width: 200px; 
   height: 200px; 
   margin: 20px; 
   background: yellow; 
   border: 5px solid black; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById('div1'); 
   oDiv1.timer=null; 
   oDiv1.onmouseover=function(){ 
    move(this,100,'opacity'); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(this,30,'opacity'); 
   }; 
  }; 
  function getStyle(obj,name){ 
   if(obj.currentStyle){ 
    return obj.currentStyle[name]; 
   }else{ 
    return getComputedStyle(obj,false)[name]; 
   } 
  }; 
  function move(obj,iTarget,name){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var cur=0; 
    if(name=='opacity'){ 
     cur=Math.round(parseFloat(getStyle(obj,name))*100); 
    }else{ 
     cur=parseInt(getStyle(obj,name)); 
    } 
    var speed=(iTarget-cur)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if(cur==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     if(name=='opacity'){ 
      obj.style.opacity=(cur+speed)/100; 
      obj.style.filter='alpha(opacity:'+cur+speed+')'; 
     }else{ 
      obj.style[name]=cur+speed+"px"; 
     } 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

javascript关于运动的各种问题经典总结

- Author -

亲爱的汉尼拔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

WEB前端开发都应知道的jquery小技巧及jquery三个简写

Nov 15 Javascript

JavaScript实现点击按钮就复制当前网址

Dec 14 Javascript

JavaScript基础知识点归纳(推荐)

Jul 09 Javascript

Vuejs第十二篇之动态组件全面解析

Sep 09 Javascript

AngularJS 模块化详解及实例代码

Sep 14 Javascript

基于bootstrap页面渲染的问题解决方法

Aug 09 Javascript

详解如何在nuxt中添加proxyTable代理

Aug 10 Javascript

vue-cli基础配置及webpack配置修改的完整步骤

Oct 20 Javascript

p5.js实现简单货车运动动画

Oct 23 Javascript

Vue最新防抖方案(必看篇)

Oct 30 Javascript

JS函数本身的作用域实例分析

Mar 16 Javascript

js+canvas实现转盘效果（两个版本）

Sep 13 Javascript

分享9点个人认为比较重要的javascript 编程技巧

Apr 27 #Javascript

javascript+html5实现仿flash滚动播放图片的方法

Apr 27 #Javascript

原生js和jQuery写的网页选项卡特效对比

Apr 27 #Javascript

javascript实现淘宝幻灯片广告展示效果

Apr 27 #Javascript

jquery实现标签上移、下移、置顶

Apr 26 #Javascript

jquery ui resize 中border-box的bug修正

Apr 26 #Javascript

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

Apr 26 #Javascript