带重力效果的登录框

来源：互联网发布：c语言大小写转换a变a 编辑：程序博客网时间：2024/05/16 09:58

背景图可更改

菜鸟一枚，大神勿喷

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title>"反弹式登录界面"</title>
       <style>
           *{
               margin: 0px ; padding: 0px;
           }
           body{
               background: #7B7B7B;
               background-size: cover;
           }
           #login{
               width: 272px;
               height: 300px;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               font-family: "微软雅黑";
               position: absolute;
               left: 40%;
               top: 0px;/*init 50px*/
           }
           .titile{
               font-size: 30px;
               font-weight: bold;
               color: #fff;
               text-align: center;
               margin-bottom: 30px;
               cursor: move;
           }
           #login input.txt{
               width: 270px;
               height: 42px;
               color: #fff;
               border-radius: 6px;
               background: rgba(45,45,45,0.15);
               margin-bottom: 15px;
               border: 1px solid rgba(255,255,255,0.15);
               box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;
           }
           #login input.but{
               width: 272px;
               height: 44px;
               background: #ef4300;
               border: 0;
               border-radius: 6px;
               box-shadow: 0 15px 30px rgba(255,255,255,0.25) inset;
               color: #fff;
               font-size: 20px;
           }
           #login input:focus{
               outline: none;
           }
       </style>
   </head>
   <body>
       <div id="login">
           <h3 class="titile">Login</h3>
           <form>
               <input id="" class="txt" name="" type="text" placeholder="userName"/><br/>
               <input id="" class="txt" name="" type="password" placeholder="password"/><br/>
               <input id="" class="but" name="" type="submit" value="sign in"/><br/>
           </form>
       </div>
   </body>
   <script>
       var oLogin=document.getElementById("login");
       var timer=null;
       var speedY=0;/*重力*/
       var speedX=0;/*惯性*/
       function startMove(){
           timer=setInterval(function(){
               speedY+=1;
               speedX*=0.98;
               var T=oLogin.offsetTop+speedY;
               var t=document.documentElement.clientHeight-oLogin.offsetHeight;/*计算出login框下的距离*/

               var L=oLogin.offsetLeft+speedX;
               var l=document.documentElement.clientWidth-oLogin.offsetWidth;

               if(T>t){
                   T=t;
                   speedY*=-1;
                   speedY*=0.79;
               }else if(T<0){
                   T=0;
                   speedY*=-1;
                   speedY*=0.79;
               }

               if(L<0){
                   L=0;
                   speedX*=-1;
               }else if(L>l){
                   L=l;
                   speedX*=-1;
               }
               oLogin.style.top=T+"px";
               oLogin.style.left=L+"px";
           },13);
       }
       startMove();
       oLogin.onmousedown=function(event){
           var x=event.clientX;
           var y=event.clientY;
           clearInterval(timer);
           var disX=event.clientX-oLogin.offsetLeft;
           var disY=event.clientY-oLogin.offsetTop;
           document.onmousemove=function(event){
               oLogin.style.left=event.clientX-disX+"px";
               oLogin.style.top=event.clientY-disY+"px";
               speedX=event.clientX-x;
               speedY=event.clientY-y;
               x=event.clientX;
               y=event.clientY;
           }
           document.onmouseup=function(){
               document.onmouseup=null;
               document.onmousemove=null;
               startMove();
           }
       }
   </script>
</html>

阅读全文

1 0