快捷導(dǎo)航

原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)

更新時(shí)間：2021年08月24日 08:36:30 作者：aiguangyuan

這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文給大家分享一個(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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

捕獲瀏覽器關(guān)閉、刷新事件不同情況下的處理方法
在做一些關(guān)于會(huì)員在線的問題時(shí)，往往我們要根據(jù)覽器是否關(guān)閉來判斷用戶是否下線，然后再從session和application中將此用戶移除，下面與大家分享下具體的捕捉方法
2013-06-06
JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁,結(jié)合完整實(shí)例形式分析了javascript針對(duì)table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁顯示的相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
Bootstrap框架的學(xué)習(xí)教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學(xué)習(xí)教程詳解，對(duì)bootstrap框架感興趣的朋友跟著小編一起學(xué)習(xí)吧
2016-10-10
微信小程序父子組件通信詳細(xì)介紹
這篇文章主要介紹了小程序中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-11-11
uniapp界面新增水印實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了uniapp界面新增水印實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運(yùn)行效果和實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-04-04
JS遍歷ul下的li點(diǎn)擊彈出li的索引的實(shí)現(xiàn)方法
這篇文章主要介紹了JS遍歷ul下的li點(diǎn)擊彈出li的索引的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
js獲取UserControl內(nèi)容為拼html時(shí)提供方便
js獲取UserControl內(nèi)容時(shí)無法測(cè)試通過，原來是繼承了Page 然后使用VerifyRenderingInServerForm驗(yàn)證
2014-11-11
javascript判斷網(wǎng)頁是關(guān)閉還是刷新
本篇文章給大家介紹js判斷網(wǎng)頁是關(guān)閉還是刷新，實(shí)現(xiàn)原理就是通過離開頁面行為時(shí)間onunload觸發(fā)時(shí)間去檢測(cè)此時(shí)的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉(zhuǎn)或是關(guān)閉行為程序，需要的朋友可以參考下本文
2015-09-09
溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
javascript是一門簡(jiǎn)單的語言，也是一門復(fù)雜的語言。這篇文章主要介紹了溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下
2016-05-05