运动基础
让Div运动起来
速度——物体运动的快慢
运动中的Bug
不会停止
速度取某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快
匀速运动（速度不变）
运动框架及应用：
运动框架：
在开始运动时，关闭已有定时器
把运动和停止隔开（if/else）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运动基础</title> <style> #div1{ width: 200px; height: 200px; background: yellow; 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=7; //控制物体运动的快慢 //注意此时，速度为7，而距离300不能整除7，所以当到达294时直接跳过300，而直接到301，所以物体就不会停止，而是继续向下运动， // if (oDiv.offsetLeft==300){ //当离左边的距离为300像素的时候，关掉定时器，使其停止运动 if (oDiv.offsetLeft>=300){ //解决不会停止的办法，此时停在的301px的位置，但是问题又来了，如果再次点击按钮， // 则物体会运动7像素，再点击一下，有运动7像素，一直点击，一直运动7的倍数个像素 //这是因为，每次点击按钮时，都会重新开一个定时器，所以每次点击就会运动一下，解决办法如下else中语句 clearInterval(timer); //到达终点以后要做的事情 } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; //到达终点之前要做的事情 } // oDiv.style.left=oDiv.offsetLeft+speed+'px'; //offsetleft就是取div的位置; speed控制运动速度 }, 30); } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()"/> <div id="div1"></div> </body> </html>
运动框架实例：
例1：“分享到”侧边栏（通过目标点，计算速度值）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侧边隐藏栏</title> <style> *{margin: 0px;padding: 0px;} #div1{ width: 150px; height: 150px; background: green; position: absolute; top: 100px; left: -150px; } #div1 span{ width: 20px; height: 60px; line-height: 20px; position: absolute; background: blue; right: -20px; top: 20px; } </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); // oDiv.onmouseover=function () { // InOut1(10, 0); //传入参数speed, iTarget // }; // oDiv.onmouseout=function () { // InOut1(-10, -150); //传入参数speed, iTarget // }; oDiv.onmouseover=function () { InOut2(0); //传入参数iTarget }; oDiv.onmouseout=function () { InOut2(-150); //传入参数iTarget }; }; var timer=null; // function Out() { // var oDiv=document.getElementById('div1'); // clearInterval(timer); // timer=setInterval(function () { // if (oDiv.offsetLeft == 0) { // clearInterval(timer); // } else { // oDiv.style.left=oDiv.offsetLeft+10+"px"; // } // }, 30); // } // // function In() { // var oDiv=document.getElementById('div1'); // clearInterval(timer); // timer=setInterval(function () { // if (oDiv.offsetLeft == -150) { // clearInterval(timer); // } else { // oDiv.style.left=oDiv.offsetLeft-10+"px"; // } // }, 30); // } //代码合并，把要发生变动的“量”定义为参数，调用时直接传入 // function InOut1(speed, iTarget) { // var oDiv=document.getElementById('div1'); // clearInterval(timer); // timer=setInterval(function () { // if (oDiv.offsetLeft == iTarget) { // clearInterval(timer); // } else { // oDiv.style.left=oDiv.offsetLeft+speed+"px"; // } // }, 30); // } //代码简化，尽量少传入参数 function InOut2(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> <a>hhhhhh</a> </div> </body> </html>
例2：淡入淡出的图片（用变量存储透明度）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容淡入淡出-透明度的变换</title> <style> #div1{ width: 200px; height: 200px; background: red; filter:alpha(opacity:30); /*IE透明度*/ opacity: 0.3; /*Chrome Firefox透明度*/ } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover=function () { Fade_In_Out(100); //淡入 }; oDiv.onmouseout=function () { Fade_In_Out(30); //淡出 }; }; var alpha = 30; //因为没有offsetAlpha该参数，所以我们改变透明度时，需要自定义变量 var timer = null; function Fade_In_Out(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+')'; //IE改变透明度，其中“:”可以换位“=” oDiv.style.opacity = alpha/100; //Chrome FireFox } }, 30); } </script> </head> <body> <div id="div1"> </div> </body> </html>
缓冲运动
逐渐变慢，最后停止
距离越远速度越大：速度由距离决定（距离越大，速度越快；距离越小，速度越慢），速度=(目标值-当前值)/缩放系数
例子：缓冲菜单
Bug：速度调整（所以当用到缓冲运动时，切记一定要用到取整，否则会有误）
// alert(Math.ceil(3.01)); //返回值为4，表示向上取整
// alert(Math.floor(3.999)); //返回值为3，表示向下取整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>速度调整</title> <style> #div1{ width: 100px; height: 100px; background: red; position: absolute; left: 0px; /*向右运动*/ /*left: 600px; !*向左运动*!*/ top: 50px; } #div2{ width: 1px; height: 300px; position: absolute; background: black; left: 300px; top: 0px; } </style> <script> // alert(Math.ceil(3.01)); //返回值为4，表示向上取整 // alert(Math.floor(3.999)); //返回值为3，表示向下取整 function startMove() { var oDiv = document.getElementById('div1'); setInterval(function () { //不断计算left的值，首先是(300-0)/15，之后是(300-x)/15，而x不断增大，速度也就逐渐变慢 var speed = (300-oDiv.offsetLeft)/15; // speed = Math.ceil(speed); //当div1向有运动时，速度向上取整 // speed = Math.floor(speed); //当div1向左运动时，速度向下取整 speed = speed>0?Math.ceil(speed):Math.floor(speed); //上面两句代码的合并 oDiv.style.left = oDiv.offsetLeft+speed+'px'; document.title = oDiv.offsetLeft+','+speed; //把主题title转换为left和speed的值，方便观察变化 }, 30); } </script> </head> <body> <button onclick="startMove()">开始运动</button> <div id="div1"></div> <div id="div2"></div> </body> </html>
跟随页面滚动的缓冲侧边栏
潜在问题：目标值不是整数时；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右侧悬浮框</title> <style> body{height: 2000px; /*为了呈现出滚动条*/} #div1{ width: 100px; height: 150px; background: red; position: absolute; right: 0px; bottom: 318px; } </style> <script> //onscroll滚动 window.onscroll = function(){ var oDiv = document.getElementById('div1'); var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; // oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop)/2+'px'; //此时存在的问题是，在滑动滚动条的时候，div1的变化“有跳动”，跳一下才变换到正确位置，所以我们注释掉，解决方法为： startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop)); //(可视区的高-div的高)/2 表示把需要悬浮的框，悬浮在靠右中间的位置； // 其中parseInt() 表示避免“除以2”时出现0.5的像素值(屏幕没有半个像素的情况)，此时悬浮框会出现上下抖动的情况，而用parseInt()取整后就不会出现这种情况了。 }; var timer=null; function startMove(iTarget) { var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-oDiv.offsetTop)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); //取整 if (oDiv.offsetTop==iTarget){ clearInterval(timer); } else { document.getElementById('txt1').value = oDiv.offsetTop; //调整悬浮框的位置，以便观察 oDiv.style.top = oDiv.offsetTop+speed+'px'; } }, 30); } </script> </head> <body> <input type="txt1" id="txt1" style="position: fixed; right: 0px; top: 0px;"/> <div id="div1"></div> </body> </html>
匀速运动的停止条件
运动终止条件：
匀速运动：距离足够近
缓冲运动：两点重合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匀速运动停止条件</title> <style> #div1{ width: 100px; height: 100px; background: red; position: absolute; left: 0px; /*向右运动*/ /*left: 600px; !*向左运动*!*/ top: 50px; } #div2{ width: 1px; height: 300px; position: absolute; background: black; left: 300px; top: 0px; } #div3{ width: 1px; height: 300px; position: absolute; background: black; left: 100px; top: 0px; } </style> <script> // alert(Math.abs(-6)); //返回值为6，abs()表示绝对值 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; } //问题出现，由于最终结果不为0，所以会因为有一定的偏差而相对抖动，我们所能够解决的是在存在偏差的情况下，结束抖动，解决办法如下： if (Math.abs(iTarget-oDiv.offsetLeft)<=7){ clearInterval(timer); //因为上面偏差是不能消除的，此时我们为了消除偏差，强行令left值等于目标值 oDiv.style.left = iTarget+'px'; //由于程序运行的速度较快，这种强行赋值使用肉眼是观察不到的 } else { oDiv.style.left = oDiv.offsetLeft+speed+'px'; } }, 30); } </script> </head> <body> <button onclick="startMove(100)">到100px</button> <button onclick="startMove(300)">到300px</button> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>