11.21.07一个很酷的登陆效果！

从截图上看不出什么，主要是动态效果！

登录效果

代码如下：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>GanGeGe’s Blog：http://www.gangege.com</title>  
  4. <style>  
  5. body {   
  6.     padding:0px;   
  7.     margin:0px;   
  8.     background-Color:black;   
  9.     border-width:0px;   
  10.     font-size:12px;   
  11.     color:#DDD;   
  12.     overflow:hidden;   
  13. }   
  14. #divLogin {   
  15.     padding:30px;   
  16.     background-Color:#E9FFF0;   
  17.     color:navy;   
  18.     filter:alpha(opacity=50);   
  19.     z-Index:90;   
  20.     text-align:center;   
  21. }   
  22. #divLogin td{   
  23.     color:#555;   
  24. }   
  25. .input0 {   
  26.     border:#000 1px solid;   
  27.     width:160px;   
  28.     height:20px;   
  29.     color:navy;   
  30. }   
  31. .input1 {   
  32.     border:#000 1px solid;   
  33.     width:80px;   
  34.     height:20px;   
  35.     background-Color:transparent;   
  36.     color:navy;   
  37.     padding-top:2px;   
  38. }   
  39. </style>  
  40. <script>  
  41. //This program is written by Hutia.   
  42. //****Instructions*******   
  43. //  All the length are in the unit "px"   
  44. //  That’s all.   
  45. //***********************   
  46. wx=wxx=screen.availWidth;   
  47. hx=hxx=screen.availHeight;   
  48. ds=1800;//ds is the distance between user and the screen.   
  49. stars=new Array();   
  50. starTimer="";   
  51. logined=false;   
  52. top.moveTo(0,0);top.resizeTo(wxx,hxx);   
  53. function init(){   
  54.     wx=document.body.clientWidth;   
  55.     hx=document.body.clientHeight;   
  56.     for(var i=0;i<16;i++)createStar();   
  57.     startMoveStar();   
  58.     startLoginMove();   
  59. }   
  60. function startLoginMove(){   
  61.     divLogin.x=-175;   
  62.     divLogin.y=-100;   
  63.     divLogin.z=100000;   
  64.     divLogin.c=0;   
  65.     divLogin.size=350;   
  66.     divLogin.speed=500;   
  67.     setTimeout(loginMove,10);   
  68. }   
  69. function loginMove(){   
  70.     divLogindivLogin.z-=divLogin.speed;   
  71.     var tRe=d3d2(divLogin.x,divLogin.y,divLogin.z,divLogin.size,divLogin.c).split(":");   
  72.     with(divLogin.style){   
  73.         position="absolute";   
  74.         left=tRe[0];   
  75.         top=tRe[1];   
  76.         if(parseInt(tRe[2])<=0){   
  77.             display="none";   
  78.         }else{   
  79.             display="";   
  80.             width=tRe[2];   
  81.             height=parseInt(tRe[2])*200/350;   
  82.             overflow="hidden";   
  83.         }   
  84.     }   
  85.     if(divLogin.z>200){   
  86.         setTimeout(loginMove,10);   
  87.     }else{   
  88.         with(divLogin.style){   
  89.             position="absolute";   
  90.             left=wx/2+divLogin.x;   
  91.             top=hx/2+divLogin.y;   
  92.             display="";   
  93.             width=-2*divLogin.x;   
  94.             height=-2*divLogin.y;   
  95.             overflow="hidden";   
  96.         }   
  97.         divLogin.children[0].style.display="";   
  98.         stopMoveStar();   
  99.         shakeWin();   
  100.     }   
  101. }   
  102. function showContent(i){   
  103.     i=isNaN(i)?-1:parseInt(i);   
  104.     i++;   
  105.     try{   
  106.         switch(i%7){   
  107.             case 0:divLogin.style.top=50;break;   
  108.             case 1:divLogin.style.top=-100;break;   
  109.             case 2:divLogin.style.top=-160;break;   
  110.             case 3:   
  111.                 divLogin.style.top=-300;   
  112.                 divLogin.children[0].style.display="none";   
  113.                 divLogin.children[0].innerHTML=divMain.innerHTML;   
  114.             break;   
  115.             case 4:   
  116.                 divLogin.x=-wx/2+50;   
  117.                 divLogin.y=-hx/2+30;   
  118.                 divLogin.z=70000;   
  119.                 divLogin.c=0;   
  120.                 divLogin.size=wx-100;   
  121.                 divLogin.speed=500;   
  122.                 divLogin.filters[0].enabled=false;   
  123.                 logined=true;   
  124.                 setTimeout(loginMove,10);   
  125.             break;   
  126.         }   
  127.     }catch(e){return(false);}   
  128.     if(i<5){   
  129.         setTimeout("showContent("+i+");",10);   
  130.     }else{   
  131.         loginMove();   
  132.     }   
  133. }   
  134. //***Star functions********   
  135. function createStar(){   
  136.     var theIndex=stars.length;   
  137.     stars[theIndex]=document.createElement("DIV");   
  138.     document.body.insertBefore(stars[theIndex]);   
  139.     setRandomAttributes(stars[theIndex]);   
  140.     setStyle(stars[theIndex]);   
  141. }   
  142. function moveStar(){   
  143.     for(var i=0;i<stars.length;i++){   
  144.         stars[i].z-=stars[i].speed;   
  145.         if(stars[i].z<1500)setRandomAttributes(stars[i]);   
  146.         setStyle(stars[i]);   
  147.     }   
  148. }   
  149. function startMoveStar(){   
  150.     stopMoveStar();   
  151.     starTimer=setInterval(moveStar,10);   
  152. }   
  153. function stopMoveStar(){   
  154.     try{   
  155.         clearInterval(starTimer);   
  156.     }catch(e){}   
  157. }   
  158. //****Private functions******   
  159. function d3d2(x,y,z,size,color){   
  160.     var x=parseFloat(x);   
  161.     var y=parseFloat(y);   
  162.     var z=parseFloat(z);   
  163.     var size=parseFloat(size);   
  164.     var color=parseFloat(color);   
  165.     var percent=ds/(ds+z);   
  166.     x=parseInt(wx/2+x*percent);   
  167.     y=parseInt(hx/2+y*percent);   
  168.     size=parseInt(size*percent);   
  169.     color=parseInt(color*percent/2.5+153);   
  170.     return(x+":"+y+":"+size+":"+color);   
  171. }   
  172. function getColor(strC){   
  173.     try{   
  174.         var i=eval("0x"+strC.substring(1,3));   
  175.     }catch(e){return(255);}   
  176.     return(i);   
  177. }   
  178. function setRandomAttributes(obj){   
  179.     obj.size=parseInt(Math.random()*10)+10;   
  180.     obj.c=parseInt(Math.random()*45)+210;   
  181.     obj.x=(parseInt(Math.random()*500)+500)*(Math.random()>0.5?1:-1);   
  182.     obj.y=(parseInt(Math.random()*400)+400)*(Math.random()>0.5?1:-1);   
  183.     obj.speed=parseInt(Math.random()*120)+180;   
  184.     obj.z=parseInt(Math.random()*12000)+8000;   
  185. }   
  186. function setStyle(obj){   
  187.     var tRe=d3d2(obj.x,obj.y,obj.z,obj.size,obj.c).split(":");   
  188.     with(obj.style){   
  189.         position="absolute";   
  190.         left=tRe[0];   
  191.         top=tRe[1];   
  192.         if(parseInt(tRe[2])<=0){   
  193.             display="none";   
  194.         }else{   
  195.             display="";   
  196.             width=tRe[2];   
  197.             height=tRe[2];   
  198.             backgroundColor=toColor(tRe[3]);   
  199.             overflow="hidden";   
  200.         }   
  201.     }   
  202. }   
  203. function toColor(intV){   
  204.     var cc=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];   
  205.     var intV=parseInt(intV);   
  206.     re=""+cc[parseInt(intV/16)]+cc[intV%16];   
  207.     return("#"+re+re+re);   
  208. }   
  209. function shakeWin(i){   
  210.     i=isNaN(i)?-1:parseInt(i);   
  211.     i++;   
  212.     try{   
  213.         switch(i%7){   
  214.             case 0:window.moveTo(3,3);break;   
  215.             case 1:window.moveTo(-3,3);break;   
  216.             case 2:window.moveTo(-3,-3);break;   
  217.             case 3:window.moveTo(3,-3);break;   
  218.             case 4:window.moveTo(-3,3);break;   
  219.             case 5:window.moveTo(3,3);break;   
  220.             case 6:window.moveTo(0,0);break;   
  221.         }   
  222.     }catch(e){return(false);}   
  223.     if(i<7){   
  224.         setTimeout("shakeWin("+i+");",10);   
  225.     }else{   
  226.         window.moveTo(0,0);   
  227.         if(!logined)startMoveStar();   
  228.     }   
  229. }   
  230. </script>  
  231. </head>  
  232. <body onload="init();">  
  233.     <div id=divLogin style="display:none;">  
  234.     <form onsubmit="return(false);" style="display:none;">  
  235.         <table>  
  236.             <tr><td colspan=2 align=center>Login</td></tr>  
  237.             <tr>  
  238.                 <td><label>Name:</label></td>  
  239.                 <td><input class=input0 value="Guest"></td>  
  240.             </tr>  
  241.             <tr>  
  242.                 <td><label>Pass:</label></td>  
  243.                 <td><input class=input0 type=password value="Guest"></td>  
  244.             </tr>  
  245.             <tr><td colspan=2 align=center>  
  246.                 <input type=submit value="OK" class=input1 onclick="showContent();">  
  247.                 <input type=reset value="Cancel" class=input1>  
  248.             </td></tr>  
  249.         </table>  
  250.     </form>  
  251.     </div>  
  252.        
  253.     <div id=divMain style="display:none;">  
  254.         <iframe src="http://www.gangege.com" width="100%" height="100%"></iframe>  
  255.     </div>  
  256. </body>  
  257. </html>  

来源：落伍者

, | 网络编程 & CODE | 浏览953 次

武汉商顺工商事务代理有限公司

说说你的看法

« 收到了第一笔广告费 百google度 »

喜欢这里就来订阅吧

您也可以用邮件订阅