原生JS實現(xiàn)各種運動之勻速運動
更新時間：2021年08月24日 08:36:30 作者：aiguangyuan
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)各種運動之勻速運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文給大家分享一個用原生JS實現(xiàn)的勻速運動，效果如下：
需要注意的是，這種運動效果在實際的開發(fā)中用的比較少，用的更多的還是彈性運動和緩沖運動，以下是代碼實現(xiàn)，歡迎大家復制粘貼及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現(xiàn)各種運動之勻速運動</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;
}
//是否到達終點
if (Math.abs(oDiv.offsetLeft - iTarget) < 7) {
//到達終點
clearInterval(timer);
oDiv.style.left = iTarget + 'px';
} else {
//到達之前
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input type="button" value="開始運動" onclick="startMove(300)" />
<div id="div1"></div>
<span></span>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在做一些關于會員在線的問題時，往往我們要根據(jù)覽器是否關閉來判斷用戶是否下線，然后再從session和application中將此用戶移除，下面與大家分享下具體的捕捉方法2013-06-06
JS基于封裝函數(shù)實現(xiàn)的表格分頁完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實現(xiàn)的表格分頁,結合完整實例形式分析了javascript針對table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁顯示的相關操作技巧,需要的朋友可以參考下2018-06-06
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學習教程詳解，對bootstrap框架感興趣的朋友跟著小編一起學習吧2016-10-10
這篇文章主要介紹了小程序中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-11-11
這篇文章主要為大家介紹了uniapp界面新增水印實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運行效果和實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
JS遍歷ul下的li點擊彈出li的索引的實現(xiàn)方法
這篇文章主要介紹了JS遍歷ul下的li點擊彈出li的索引的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
js獲取UserControl內(nèi)容為拼html時提供方便
js獲取UserControl內(nèi)容時無法測試通過，原來是繼承了Page 然后使用VerifyRenderingInServerForm驗證2014-11-11
本篇文章給大家介紹js判斷網(wǎng)頁是關閉還是刷新，實現(xiàn)原理就是通過離開頁面行為時間onunload觸發(fā)時間去檢測此時的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉或是關閉行為程序，需要的朋友可以參考下本文2015-09-09
javascript是一門簡單的語言，也是一門復雜的語言。這篇文章主要介紹了溫習Javascript基礎語法之詞法結構的相關資料,需要的朋友可以參考下2016-05-05