javascript模擬重力感應彈跳，做個不一樣的登陸埠

web前端群，189394454，有視訊、原始碼、學習方法等大量乾貨分享

效果知識點：原生js動畫效果 ,重力系統,彈跳演算法, 迭代與遞迴, 動畫序列, , 兩種定時器配合使用, 迴圈判斷注意事項 ,程式設計思想與解決方案思維。

?html程式碼：

    <div id="bg_wrap">
    <div><img src="images/1.jpg" width="100%" height="100%" alt="背景圖"/></div>
    <div><img src="images/2.jpg" width="100%" height="100%" alt="背景圖"/></div>
    <div><img src="images/3.jpg" width="100%" height="100%" alt="背景圖"/></div>
</div>
<!--bg_wrap end-->
<!--Login start-->
<div id="Login">
    <h3  id="title" class="move">User Login</h3>
    <form action="http://web.tanzhouedu.com/" method="post" target="_blank">
        <input  type="text" placeholder="Username" class="txt move" name="username" required autocomplete="off">
        <input type="password" placeholder="Password" class="txt move" name="password" required>
        <input  'type="submit" class="but move" value="Sign in" id="submit"/>
    </form>
</div>

?css程式碼：

 <style>
    * { margin: 0px; padding: 0px; }

body { overflow: hidden; }

#bg_wrap { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; }

#bg_wrap div { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; transition: opacity 3s}
#bg_wrap div:nth-of-type(1){opacity:1}



/*第一個背景div*/
#Login { width: 272px; height: 300px; margin: 200px auto; }

#Login .move { position: absolute; top:-100px; }

#Login h3 { font-size: 30px; font-weight: 700; color: #ffffff; font-family: Andalus; text-align: center; margin-bottom: 30px; cursor: move; }

#Login input.txt { width: 270px; height: 42px; color: #ffffff; background: rgba(45, 45, 45, .15); border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; margin-bottom: 25px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); text-indent: 10px; }

#Login input.but { background: #ef4300; width: 272px; height: 44px; box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); border: 0px; border-radius: 6px; color: #ffffff; font-size: 14px; text-align:center;}

#Login input:focus { outline: none; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); }

/*當input獲取焦點的時候*/

input::-webkit-input-placeholder { color: #ffffff; }

/*修改輸入框預設輸入文字顏色*/

#title { width: 270px; text-align: center }
  </style>

?javascript程式碼：

<script>
        /*
           1. 背景漸變 (定時器 + 透明度改變){
                    
            }
        
        */
        //function(){}   /*匿名函式*/
        //()()           /*IIFE 匿名函式立刻執行 函式自執行體*/
        (function(){
            var timer=null;   /*宣告定時器*/
            /*最新的元素獲取寫法 相容ie8*//*一組元素*/ 
            var oImg=document.querySelectorAll('#bg_wrap div');
            var len=oImg.length; //3
            var index=0;
            timer=setInterval(function(){
                oImg[index].style.opacity=0; 
                index++;//1 index=index+1; 
                index%=len;  // 求模取餘 index=index%len;
                /*
                  0%3= 0 1%3=1  2%3=2 3%3=0整除了
                */
                oImg[index].style.opacity=1;
            },3000);
        })(); 
        // 表單重力模擬彈跳系統
        (function(){
            /*
                改變定位元素的 top值 1
                達到指定位置之後進行彈跳一次 1

                多個元素依次運動 
                
                動畫序列
            */
            var oMove=document.querySelectorAll('.move');
            var len=oMove.length;
            var timer=null;
            var timeout=null; //setTimeout
            var speed=3;
        /*  for(var i=len-1;i>=0;i--){
                (function(x){
                    setTimeout(function(){
                            clearInterval(timer);
                            var end=150+(x*60);
                            timer=setInterval(function(){
                            speed+=3; 
                            var T=oMove[x].offsetTop+speed;
                            if(T>end){
                                T=end;
                                speed*=-1; // 讓動量變為負數
                                speed*=0.4; // 摩擦係數 每一次都慢一點
                            }
                            console.log(speed)
                            oMove[x].style.top=T+'px';
                        },20);
                    },900*(len-1-x))
                })(i)
            } */
            //oMove[len-1];
            move(len-1);
            function move(index){
                //根據下標來計算end值
                if(index<0){//如果下標<0 我們清除所有定時器
                 clearInterval(timer);     //清除迴圈定時器
                 clearTimeout(timeout);    //清除延時定時器
                 return;                   //終止函式
                }
                var end=150+(index*60);
                timer=setInterval(function(){
                //動量每回合自增3 模擬重力加速度
                speed+=3; // 4 7 11   -30 -27 -24 ... 30 -30
                //設定每一次的top值 他本身距離頂端的距離+ 動量
                var T=oMove[index].offsetTop+speed;
                
                //當元素的top大於設定值的時候
                if(T>end){
                    T=end;
                    speed*=-1; // 讓動量變為負數
                    speed*=0.4; // 摩擦係數 每一次都慢一點;
                }
                console.log(speed)
                oMove[index].style.top=T+'px';
            },20);
            //過多少時間之後執行函式
                timeout=setTimeout(function(){
                    clearInterval(timer);
                    index--;     // 3=>2
                    move(index); // 遞迴自己呼叫自己
                },900);
        }
            
            
        })();
    </script>