首頁 > 開發者 > JavaScript

Javascript勻速運動應用-網站分享功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

網站上會經常用到Javascript 中的運動，這次與大家分享一下一些運動的基本應用 。 方便大家在開發中能夠直接使用。

代碼簡單易懂，適用於初學者。最後會一步一步整理出一套自己的運動架構。

應用案例效果圖：

 

 

滑鼠移動到分享上 ，左邊的div就會顯示出來。移開會自己恢複。相信這個大家都會用到 很實用，下面看看代碼是如何?的。

 代碼如下 複製代碼
<style type="text/css">
    #div1 {
        width: 150px;
        height: 200px;
        background: green;
        position: absolute;
        left: -150px;
    }
    #div1 span {
        position: absolute;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: blue;
        right: -20px;
        top: 70px;
    }
</style>

 

 代碼如下 複製代碼
<body>
    <div id="div1">
        <span>
            分享到
        </span>
    </div>
</body>

以下是Javascript 代碼

 

 代碼如下 複製代碼

<script type="text/javascript">
    window.onload=function(){
        var oDiv=document.getElementById("div1");
       
        oDiv.onmouseover=function(){
            startMove(0);
        };
       
        oDiv.onmouseout=function(){
            startMove(-150);
        };
    }
   
    var time=null;

    function startMove(iTraget){
        var oDiv=document.getElementById("div1");
       
        clearInterval(time);
       
        time=setInterval(function(){
            var speed=0;
           
            if(oDiv.offsetLeft>iTraget){
                speed=-10;
            }else{
                speed=10;
            }
           
            if(oDiv.offsetLeft==iTraget){
                clearInterval(time);
            }else{
                oDiv.style.left=oDiv.offsetLeft+speed+'px';
            }
        },30);
    }
</script>

 

思路：

樣式中初始的left是-150 這樣div就是縮在裡面，給0 就會顯示出來。 那麼我們只要變動這個值就可以了

startMove 中的參數 iTarget 是目標點 ，表示到哪個目標點會停下來。

控制speed 的大小 就能控制運動的快慢。如果達到目標點 就停止定時器 。

規律：

* 假設
* left:30   iTarget:300   得出   往右  為正
* left:600  iTarget:50    得出   往左  為負
*
* 通過當前位置left 與目標點的 關係 iTarget 推斷出 速度的正負

注意： 一上來就要關了定時器，因為是每次移動到分享到，都會開個定時器，開的越多相對來說速度就越快，因為同時會有多個定時器執行。

所以每次要保證一個定時器工作。

遵循：函數功能一樣，參數越少越好的原則 ，所以根據上面的規律把speed 並不是作為參數傳入。

舉個生活中的例子：你打車，告訴出租車司機已100碼的速度到哪哪哪，一般是不可能的吧。打車你不可能告訴師傅你要跑多快

所以程式也是一樣的，這裡就把速度這個傳參去掉了。

當然現在的這個運動架構還會有許多問題，在之後會陸續解決。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More