运动基础
一、匀速运动
运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(if/else)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;} </style> <script> var timer = null; function startMove() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer = setInterval(function (){ var speed = 1; if(oDiv.offsetLeft>=300){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()" /> <div id="div1"> </div> </body> </html>
运动框架实例
例子1：“分享到”侧边栏
通过目标点，计算速度值
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;} #div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(0); }; oDiv.onmouseout=function () { startMove(-150); }; }; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft>iTarget) { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> </body> </html>
例子2：淡入淡出的图片
用变量存储透明度
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(100); }; oDiv.onmouseout=function () { startMove(30); }; }; var alpha=30; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(alpha<iTarget) { speed=10; } else { speed=-10; } if(alpha==iTarget) { clearInterval(timer); } else { alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } }, 30); } </script> </head> <body> <div id="div1"></div> </body> </html>
二、缓冲运动
逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:100px; background:red; position:absolute; left:0px; top:50px;} #div2 {width: 1px; height: 300px; background: black; position: absolute;left:300px;} </style> <script> function startMove() { var oDiv=document.getElementById('div1'); setInterval(function (){ var speed=(300-oDiv.offsetLeft)/10; speed = speed>0 ? Math.ceil(speed): Math.floor(speed); oDiv.style.left=oDiv.offsetLeft+speed+'px'; document.title = speed; }, 30); } </script> </head> <body> <input type="button" value="开始运动" onclick="startMove()" /> <div id="div1"> </div> <div id="div2"></div> </body> </html>
例子：缓冲菜单
Bug：速度取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
跟随页面滚动的缓冲侧边栏
潜在问题：目标值不是整数时
解决方法是让它传进来的就是个整数就完了。
例子：对联悬浮框：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll=function () { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop)); }; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=(iTarget-oDiv.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop==iTarget) { clearInterval(timer); } else { document.title=iTarget; document.getElementById('txt1').value=oDiv.offsetTop; oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } </script> </head> <body style="height:2000px;"> <input type="text" id="txt1" style="position:fixed; right:0; top:0;" /> <div id="div1"></div> </body> </html>
三、匀速运动的停止条件
运动终止条件
匀速运动：距离足够近
缓冲运动：两点重合
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;} </style> <script> var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft<iTarget) { speed=7; } else { speed=-7; } if(Math.abs(iTarget-oDiv.offsetLeft)<=7) { clearInterval(timer); oDiv.style.left=iTarget+'px'; } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <input type="button" value="到100" onclick="startMove(100)" /> <input type="button" value="到300" onclick="startMove(300)" /> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
------------