JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解
在這篇文章里,我將把JS的運(yùn)動(dòng)由簡(jiǎn)如深的進(jìn)行分析:
運(yùn)動(dòng)基礎(chǔ)
主要步驟為:
清除定時(shí)器,保證運(yùn)動(dòng)過程中只有一個(gè)定時(shí)器
開啟定時(shí)器
開始運(yùn)動(dòng),同時(shí)加入判斷以便在需要時(shí)停止運(yùn)動(dòng)。將移動(dòng)函數(shù)進(jìn)行了簡(jiǎn)單的封裝。
<script type=’text/x-handlebars-template’ id=’list-item’> {{#if items}} <ul id=’mylist’> {{#each items}} <li><a href=’{{url}}’>{{text}}</a></li> {{/each}} </ul> {{/if}}</script>funtion addItem(url,text){ var mylist = document.getElementById(’mylist’), script = document.getElementById(’list-item’), template = Handlebars.compile(script.text), //提取模板文本,返回格式化方法 div = document.createElement(’div’), result; result = template({text:text,url:url}); div.innerHTML = result; mylist.appendChild(div.firstChild);}//調(diào)用addItem(’/item/4,’First item’);
當(dāng)使用這種方法時(shí)出現(xiàn)的問題有:
需要相對(duì)應(yīng)的計(jì)算每次移動(dòng)的距離,否則當(dāng)移動(dòng)的距離不能準(zhǔn)確到達(dá)指定位置時(shí)會(huì)出現(xiàn)問題
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. css代碼優(yōu)化的12個(gè)技巧2. 微信開發(fā) 網(wǎng)頁(yè)授權(quán)獲取用戶基本信息3. 爬取今日頭條Ajax請(qǐng)求4. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器5. 詳解瀏覽器的緩存機(jī)制6. jsp EL表達(dá)式詳解7. asp批量添加修改刪除操作示例代碼8. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法9. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))10. HTML5 Canvas繪制圖形從入門到精通
