知识点：原生js动画效果 ,重力系统,弹跳算法, 迭代与递归, 动画序列, , 两种定时器配合使用, 循环判断注意事项 ,编程思想与解决方案思维。

html代码：

    <div id="bg_wrap">    <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="100%" height="100%" alt="背景图"/></div>    <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" width="100%" height="100%" alt="背景图"/></div>    <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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> </head>

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>