淺談Javascript如何實現(xiàn)勻速運動
網(wǎng)站上會經(jīng)常用到Javascript 中的運動，這次與大家分享一下一些運動的基本應(yīng)用 。 方便大家在開發(fā)中能夠直接使用。
代碼簡單易懂，適用于初學(xué)者。最后會一步一步整理出一套自己的運動框架。
應(yīng)用案例效果圖：
鼠標(biāo)移動到分享上 ，左邊的div就會顯示出來。移開會自己恢復(fù)。相信這個大家都會用到 很實用，下面看看代碼是如何實現(xiàn)的。
<style type="text/css">
#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>
<body>
<div id="div1">
<span>
分享到
</span>
</div>
</body>
以下是Javascript 代碼
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(0);
};
oDiv.onmouseout=function(){
startMove(-150);
};
}
var time=null;
function startMove(iTraget){
var oDiv=document.getElementById("div1");
clearInterval(time);
time=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTraget){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==iTraget){
clearInterval(time);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
思路：
樣式中初始的left是-150 這樣div就是縮在里面，給0 就會顯示出來。 那么我們只要變動這個值就可以了
startMove 中的參數(shù) iTarget 是目標(biāo)點 ，表示到哪個目標(biāo)點會停下來。
控制speed 的大小 就能控制運動的快慢。如果達(dá)到目標(biāo)點 就停止定時器 。
規(guī)律：
* 假設(shè)
* left:30 iTarget:300 得出 往右 為正
* left:600 iTarget:50 得出 往左 為負(fù)
*
* 通過當(dāng)前位置left 與目標(biāo)點的 關(guān)系 iTarget 推斷出 速度的正負(fù)
注意： 一上來就要關(guān)了定時器，因為是每次移動到分享到，都會開個定時器，開的越多相對來說速度就越快，因為同時會有多個定時器執(zhí)行。
所以每次要保證一個定時器工作。
遵循：函數(shù)功能一樣，參數(shù)越少越好的原則 ，所以根據(jù)上面的規(guī)律把speed 并不是作為參數(shù)傳入。
舉個生活中的例子：你打車，告訴出租車司機(jī)已100碼的速度到哪哪哪，一般是不可能的吧。打車你不可能告訴師傅你要跑多快
所以程序也是一樣的，這里就把速度這個傳參去掉了。
當(dāng)然現(xiàn)在的這個運動框架還會有許多問題，在之后會陸續(xù)解決。下篇文章，我們來探討下勻速運動如何停止。
相關(guān)文章
CascadeView級聯(lián)組件實現(xiàn)思路詳解(分離思想和單鏈表)
本文介紹自己最近做省市級聯(lián)的類似的級聯(lián)功能的實現(xiàn)思路，為了盡可能地做到職責(zé)分離跟表現(xiàn)與行為分離，這個功能拆分成了2個組件并用到了單鏈表來實現(xiàn)關(guān)鍵的級聯(lián)邏輯，下一段有演示效果的gif圖2016-04-04
數(shù)組去重復(fù)是一個常見的需求，我們暫時考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡單地總結(jié)一下分享給大家。2015-04-04
本文為大家介紹下如何改變隱藏的input中value的值，一句代碼就可以實現(xiàn)，感性的朋友可以參考下2013-12-12
這篇文章將帶大家深入探討 class 在 JavaScript 中的作用、語法和使用方法，并與 ES5 構(gòu)造函數(shù)進(jìn)行對比，希望可以幫助大家更好地理解和應(yīng)用類的概念2023-06-06
我看到過很多人不愿意去正視ajax所存在的技術(shù)瓶頸，其實AJAX更應(yīng)該是Ajax而不是AJAX，突出第一個A是想強(qiáng)調(diào)其實AJAX發(fā)揚的是一種異步傳輸?shù)姆椒?，而不是具體到底使用了哪種技術(shù)2013-11-11
《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法,需要的朋友可以參考下2015-01-01
利用JavaScript將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符格式的多種實現(xiàn)方法
如何利用 JavaScript 將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符的格式,我們將介紹多種方法,包括使用內(nèi)置的 toLocaleString() 方法、Intl.NumberFormat 對象以及自定義函數(shù)來實現(xiàn)數(shù)字格式化,需要的朋友可以參考下2023-12-12
javascript DOM編程實例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊，這是目前成就感最強(qiáng)烈的一塊了，畢老師很認(rèn)真的給我們講解了相關(guān)知識，并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進(jìn)行講解2009-11-11
這篇文章主要介紹了js實現(xiàn)的二分查找算法,結(jié)合實例形式較為詳細(xì)的分析了JavaScript簡單實現(xiàn)二分查找算法的運算原理與具體步驟,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JavaScript判斷undefined類型的正確方法,相信很多同學(xué)在遇到這問題時都會用到錯誤的方法,正確方法也很簡單,需要的朋友可以參考下2015-06-06