一、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> <span>分享到</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> </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> <div></div> </body> </html>
二、JS多物体运动的各种问题
问题一：
希望实现的功能：三个平行div自由的平行缩放。
代码：