加减速运动速度不断增加或减少速度减小到负值，会向反方向运动弹性运动在目标点左边，加速；在目标点右边，减速根据距离，计算加速度带摩擦力的弹性运动弹性运动+摩擦力
弹性:速度 += (目标点 - 当前值)/系数; //6 , 7 , 8速度 *= 摩擦系数; // 0.7 0.75终止条件距离足够近 并且 速度足够小
缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; position:absolute; left:0;} 8 #bg{ width:1px; height:500px; background:black; position:absolute; left:500px; top:0;} 9 </style>10 <script>11 12 //摩擦力 : F = fM13 14 window.onload = function(){15 var oInput = document.getElementById('input1');16 var oDiv = document.getElementById('div1');17 18 var timer = null;19 var iSpeed = 0;20 21 oInput.onclick = function(){22 startMove();23 };24 25 function startMove(){26 clearInterval(timer);27 timer = setInterval(function(){28 29 /*if( oDiv.offsetLeft < 500 ){30 iSpeed += (500 - oDiv.offsetLeft)/50;31 }32 else{33 iSpeed -= (oDiv.offsetLeft - 500)/50;34 }*/35 36 iSpeed += (500 - oDiv.offsetLeft)/6;37 iSpeed *= 0.75;38 39 if( Math.abs(iSpeed)<=1 && Math.abs(500 - oDiv.offsetLeft)<=1 ){/*距离足够近 并且 速度足够小*/40 clearInterval(timer);41 oDiv.style.left = '500px';42 iSpeed = 0;43 }44 else{45 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';46 }47 48 document.title = oDiv.style.left + ',' + iSpeed;49 50 },30);51 }52 53 };54 </script>55 </head>56 57 <body>58 <input type="button" value="开始运动" id="input1">59 <div id="div1"></div>60 <div id="bg"></div>61 </body>62 </html>新闻热点
疑难解答
