轉行學開發，代碼100天——2018-04-23

一、運動基礎框架

JavaScript的運動可以廣義理解為漸變效果，直接移動效果等，圖網頁上常見的“分享到”，banner，透明度變化等。其實現的基本方法就是利用前面學到的定時器。

通過學習，總結一下基本的運動實現——運動框架。

運動框架可以理解為實現元素運動的流程。比如讓一個div盒子運動起來，即給其left樣式加一個定時器即可。

<input type="button" value="開始運動" id="btn">
    <div id="div1"></div>

<script type="text/javascript">
    var
 
 timer =null;
    window.onload = function () {
        var speed =6;//設置移動速度
        var oDiv = document.getElementById(‘div1‘);
        var oBtn = document.getElementById(‘btn‘);
        oBtn.onclick =function(){
            clearInterval(timer);  //運動前需要關閉其他所以定時器
            timer =  setInterval(function
 
(){
                if(oDiv.offsetLeft>300) {  //在指定範圍內移動
                    clearInterval(timer);
                }else
                oDiv.style.left = oDiv.offsetLeft+speed+"px";
            },200);
        }
    }
</script>

註意：

1、實現運動時，往往要設置一個速度變量speed，用來控制物體的運動速度。

2、這裏能實現在指定範圍內的移動，但這裏存在一個移動的問題，按照 距離= 速度x時間 ，往往不會恰好在指定位置停止。所以需要設置好停止條件。

3、如果在按鈕事件—開始運動之時，連續點擊"開始運動“，若沒有關閉其他定時器，DIV盒子會越來越快，這就不符合設計要求了。所以在運動前需要添加

clearInterval(timer);

4、這種固定速度的運動方式可以成為勻速運動。
5、運動的實現，需要物體絕對定位。position:absolute;top:0;left0;


二、應用案例

2.1 網頁“分享到”“反饋”等側邊欄效果。

當鼠標移動到“分享到”區域時，div盒子向左伸出，移開鼠標時，回到原位。

按照前面對運動框架的分析，我們同樣需要寫一個運動的框架，將其放置到鼠標onmouseover和onmouseout事件中。

CSS樣式設置：

*{margin: 0;padding: 0;}

 #div1{width: 160px;height: 260px;background: #666;position: absolute;top: 200px;left: -160px;}
 #div1 span{width: 20px;height: 60px;font-size:12px;color:#fff;background: blue;line-height:20px;position: absolute;left:160px; top: 120px;}

        //左移
        function startMove1(){
            var odiv = document.getElementById("div1");
            clearInterval(timer);
            timer= setInterval(function(){
                if (odiv.offsetLeft==0) {
                    clearInterval(timer);
                }else
                {
                    odiv.style.left = odiv.offsetLeft+10+"px";
                }
            },200);
        }
            //右移
            function startMove2(){
                var odiv = document.getElementById("div1");
                clearInterval(timer);
                timer= setInterval(function(){
                    if (odiv.offsetLeft==160) {
                        clearInterval(timer);
                    }else
                    {
                        odiv.style.left = odiv.offsetLeft-10+"px";
                    }
                },200);
            }

然後在鼠標事件中添加事件

 var oDiv = document.getElementById("div1");
          
              //鼠標移入
              oDiv.onmouseover = function(){
                  startMove1();
              };
              //鼠標移出
              oDiv.onmouseout = function(){
                  startMove2();
              };

這樣就實現了這個側邊欄的移出移進的動作。

但這並不意為著代碼的結果，觀察“左移”和“右移”的代碼，高度相似，不同之處僅僅在於“偏移量”和“移動速度”。因此，可以考慮將這兩種實現方式通過傳參來進行優化。

增加參數1：iTarget 目標位置 ;參數2：speed 移動速度

 var timer = null; //設置定時器變量
        var speed = 10; //設置速度變量
        function startMove(iTarget,speed){
            var odiv = document.getElementById("div1");
            clearInterval(timer);
            timer= setInterval(function(){
                if (odiv.offsetLeft==iTarget) {
                    clearInterval(timer);
                }else
                {
                    odiv.style.left = odiv.offsetLeft+speed+"px";
                }
            },200);
        }

             //鼠標移入
              oDiv.onmouseover = function(){
                  // startMove1();
                  startMove(0,10);
              };
              //鼠標移出
              oDiv.onmouseout = function(){
                  // startMove2();
                  startMove(-160,-10);
              };

如此，既能滿足基本的功能效果，又能大量優化代碼。

day38—JavaScript的運動基礎-勻速運動