原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)
本文給大家分享一個(gè)用原生JS實(shí)現(xiàn)的勻速運(yùn)動(dòng),效果如下:
需要注意的是,這種運(yùn)動(dòng)效果在實(shí)際的開發(fā)中用的比較少,用的更多的還是彈性運(yùn)動(dòng)和緩沖運(yùn)動(dòng),以下是代碼實(shí)現(xiàn),歡迎大家復(fù)制粘貼及吐槽。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)</title> <style> #div1 { width: 100px; height: 100px; position: absolute; background: red; left: 0; top: 50px; } span { width: 1px; height: 300px; background: black; position: absolute; left: 300px; top: 0; } ; </style> <script type="text/javascript"> var timer = null; function startMove(iTarget) { var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var iSpeed = 0; if (oDiv.offsetLeft < iTarget) { iSpeed = 7; } else { iSpeed = -7; } //是否到達(dá)終點(diǎn) if (Math.abs(oDiv.offsetLeft - iTarget) < 7) { //到達(dá)終點(diǎn) clearInterval(timer); oDiv.style.left = iTarget + 'px'; } else { //到達(dá)之前 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <input type="button" value="開始運(yùn)動(dòng)" onclick="startMove(300)" /> <div id="div1"></div> <span></span> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
- javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- 淺談Javascript中勻速運(yùn)動(dòng)的停止條件
- 淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動(dòng)
- JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
- JS勻速運(yùn)動(dòng)演示示例代碼
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
相關(guān)文章
JavaScript相等運(yùn)算符的九條規(guī)則示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript相等運(yùn)算符的九條規(guī)則,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10JavaScript 對(duì)象模型 執(zhí)行模型
簡單數(shù)值類型: 有Undefined, Null, Boolean, Number和String。注意,描述中的英文單詞在這里僅指數(shù)據(jù)類型的名稱,并不特指JS的全局對(duì)象N an, Boolean, Number, String等,它們?cè)诟拍钌系膮^(qū)別是比較大的。2010-10-10JavaScript 通過模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問題,在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能,以方便開發(fā)者組織代碼邏輯,簡化使用者調(diào)用。2010-08-08js檢測(cè)離開或刷新頁面時(shí)表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測(cè)離開或刷新頁面時(shí)表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2016-08-08