欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生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>

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

相關(guān)文章

  • ES6字符串和數(shù)值新增方法總結(jié)

    ES6字符串和數(shù)值新增方法總結(jié)

    ES6為js新增了很多方法,包括遍歷、查詢、替換等等,下面這篇文章主要給大家介紹了關(guān)于ES6字符串和數(shù)值新增方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 問題解析有JSDoc還需要TypeScript嗎

    問題解析有JSDoc還需要TypeScript嗎

    這篇文章主要介紹了有JSDoc還需要TypeScript的問題示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • js實(shí)現(xiàn)tab欄切換效果

    js實(shí)現(xiàn)tab欄切換效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • js實(shí)現(xiàn)圖片漂浮效果的方法

    js實(shí)現(xiàn)圖片漂浮效果的方法

    這篇文章主要介紹了js實(shí)現(xiàn)圖片漂浮效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片漂浮的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • JavaScript相等運(yùn)算符的九條規(guī)則示例詳解

    JavaScript相等運(yùn)算符的九條規(guī)則示例詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript相等運(yùn)算符的九條規(guī)則,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • JavaScript 對(duì)象模型 執(zhí)行模型

    JavaScript 對(duì)象模型 執(zhí)行模型

    簡單數(shù)值類型: 有Undefined, Null, Boolean, Number和String。注意,描述中的英文單詞在這里僅指數(shù)據(jù)類型的名稱,并不特指JS的全局對(duì)象N an, Boolean, Number, String等,它們?cè)诟拍钌系膮^(qū)別是比較大的。
    2010-10-10
  • JavaScript 通過模式匹配實(shí)現(xiàn)重載

    JavaScript 通過模式匹配實(shí)現(xiàn)重載

    昨天rank同學(xué)向我提出一個(gè)問題,在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能,以方便開發(fā)者組織代碼邏輯,簡化使用者調(diào)用。
    2010-08-08
  • IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法

    IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法

    這篇文章主要介紹了IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法,本文使用vbscript來解決這個(gè)問題,需要的朋友可以參考下
    2015-02-02
  • js檢測(cè)離開或刷新頁面時(shí)表單數(shù)據(jù)是否更改的方法

    js檢測(cè)離開或刷新頁面時(shí)表單數(shù)據(jù)是否更改的方法

    這篇文章主要介紹了js檢測(cè)離開或刷新頁面時(shí)表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • 手把手帶你入門微信小程序新框架Kbone的使用

    手把手帶你入門微信小程序新框架Kbone的使用

    這篇文章主要介紹了手把手帶你入門微信小程序新框架Kbone的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02

最新評(píng)論