缓冲运动应用：
例子：跟随页面滚动的缓冲侧边栏
遇到问题：一个元素的left加小数是没有意义，会转成整数，造成死循环
解决技巧:
1、speed速度越来越慢,直到speed成小数设置speed取整行为，left每次加一直到目标点
2、根据方向speed为正时成小数向上进行取整，直到left为300停止定时器，反之向下取整
3、距离越远速度越大、公式：速度=（目标值-当前值）/缩放系数
4、潜在问题目标值不是整数，解决： 速度取整，
例1：缓冲减速运动基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缓冲减速运动</title> <style> *{margin:0;padding:0;} #aa1 {position:absolute;left:500px;width:100px;height:100px;background:#F00;display:inline-block;} #btn1 {position:absolute;top:120px;} .line {position:absolute;left:300px;width:1px;height:500px;background:#000;} </style> </head> <body> <input type="button" value = "移动" id="btn1"> <div id="aa1"></div> <div id="aa2"></div> <div class='line'></div> <script> var oDiv = document.querySelector('#aa1'); var oBtn = document.querySelector('#btn1'); var timer=null; oBtn.onclick=function(){ var speed=0; clearInterval(timer); timer = setInterval(function(){ //1、speed速度越来越慢,直到speed成小数取整， speed =(300-oDiv.offsetLeft) / 8; speed=speed<0?Math.floor(speed):Math.ceil(speed); if(oDiv.offsetLeft == 300){ clearInterval(timer); timer=null; } else { oDiv.style.left = parseInt(oDiv.offsetLeft + speed) + 'px'; console.log( oDiv.style.left+', '+speed); } },20) }; </script> </body> </html>
例2：跟随页面滚动的缓冲侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跟随页面滚动的缓冲侧边栏</title> <style> *{margin:0;padding:0;} #aa {position:absolute;right:0px;width:20px;height:100px; background:#F00;display:inline-block;top:0px;} body{height: 2000px;} </style> </head> <body> <div id="aa"></div> <script> //滚动条高度 var oDiv = document.getElementById('aa'); //浏览器可视区域的宽度(常用)：document.documentElement.clientHeight var iTop = (document.documentElement.clientHeight-oDiv.offsetHeight)/2; window.onscroll=function(){ iScrollTop = document.documentElement.scrollTop||document.body.scrollTop; // oDiv.style.top = iTop+iscroll+'px'; animate(iTop+iScrollTop); } var timer =null; function animate(dest){ var speed=0; clearInterval(timer); timer =setInterval(function(){ //1、缓冲运动公式：速度=（目标值-当前值）/缩放系数 speed =( dest -oDiv.offsetTop)/8; //2、避免出现小数造成死循环 speed = speed<0?Math.floor(speed):Math.ceil(speed); //3、停止条件 if(dest ==oDiv.offsetTop){ clearInterval(timer); timer=null; }else { oDiv.style.top = oDiv.offsetTop+speed+'px'; } if(speed==-1){//-1时会颤抖，停止 clearInterval(timer); timer=null; } },20) } </script> </body> </html>
例3：多物体运动
多物体运动注意：定义自己定时器互不干扰，并把当前对象作为参数传入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style> *{margin:0;padding:0;} div{width: 100px;background: #F00;display: block;height: 50px;margin-bottom:10px;} </style> </head> <body> <div data-index="1"></div> <div data-index="2"></div> <div data-index="3"></div> <script> var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].onmouseover=function(){ animate(this,200) } oDiv[i].onmouseout=function(){ animate(this,100) } } //多物体运动定义自己定时器，并把当前对象作为参数传入 var timer = null; function animate(elem,dest){ console.log(elem.getAttribute('data-index')) clearInterval(elem.timer); var speed = 0; elem.timer = setInterval(function(){ speed = (dest - elem.offsetWidth)/8; speed = speed<0 ? Math.floor(speed) : Math.ceil(speed); if(elem.offsetWidth==dest){ clearInterval(elem.timer); }else { elem.style.width = elem.offsetWidth+speed+'px'; } },20) } </script> </body> </html>