12,缓冲运动。匀速运动停止条件
緩沖運(yùn)動(dòng)：iSpeed=(iTarget-oDiv.offsetLeft)/7;速度離目標(biāo)點(diǎn)越遠(yuǎn)，速度越大，離目標(biāo)點(diǎn)越近速度越小；
只支持1px是最小單位，沒有0.5px。所以當(dāng)iSpeed為小數(shù)時(shí)如（0.7），oDiv.style.Left=oDiv.offsetLef+iSpeed+'px';會(huì)把小數(shù)部分去掉，Div的位置永遠(yuǎn)到不了目標(biāo)點(diǎn)；所以用Math.ceil(iSpeed);向上取值；當(dāng)速度為負(fù)，則用Math.floor(iSpeed);向下取值；
<body> <input type="button" value="開始運(yùn)動(dòng)" onclick="startMove()" /> <div id="div1"></div> <div id="div2"></div> </body>
js:
<script> function startMove() {var oDiv=document.getElementById('div1');setInterval(function (){var speed=(300-oDiv.offsetLeft)/10;//speed=Math.floor(speed);speed=speed>0?Math.ceil(speed):Math.floor(speed);oDiv.style.left=oDiv.offsetLeft+speed+'px';document.title=oDiv.offsetLeft+','+speed;}, 30); } </script>
練習(xí)1：對(duì)聯(lián)浮動(dòng)
目標(biāo)點(diǎn):iTarget:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
為防止目標(biāo)點(diǎn)是小數(shù)造成div上下不停跳動(dòng)，iTarget為parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);
html
<body style="height:2000px;"> <input type="text" id="txt1" style="position:fixed; right:0; top:0;" /> <div id="div1"></div> </body>
CSS:
<style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style>
JS:
<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>
?勻速運(yùn)動(dòng)停止條件:
當(dāng)Div的位置與目標(biāo)值非常接近的時(shí)候，距離不足一步即一個(gè)速度iSpeed的時(shí)候，關(guān)閉定時(shí)器，并使div的位置等于目標(biāo)值；
HTML：
<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>
CSS:
<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>
JS:
<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>
運(yùn)動(dòng)框架：1清楚定時(shí)器；clearInterval(timer);
2.設(shè)置定時(shí)器；timer=setInterval(fun,30);
3.判斷速度條件；if else
4，判斷運(yùn)動(dòng)停止條件；if else
轉(zhuǎn)載于:https://www.cnblogs.com/maoduoduo/p/3146214.html
總結(jié)
以上是生活随笔為你收集整理的12,缓冲运动。匀速运动停止条件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转][小结][三种方法]实现WPF不规
- 下一篇： 天官赐福漫画微博是谁画的呢？