可选择Email和用户名登录的代码 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>登陆界面</title> 
  6.         <style type="text/css"> 
  7. * { 
  8.         margin:0; 
  9.         padding:0; 
  10.         font-size:12px; 
  11.         font-weight:normal; 
  12.         font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体"; 
  13.         font-style:normal; 
  14.         list-style-type:none; 
  15.         text-decoration:none; 
  16. } 
  17. div#body input#fnbtn { 
  18.         width:78px; 
  19.         height:39px; 
  20.         border:none; 
  21.         cursor:pointer; 
  22.         position:absolute; 
  23.         top:40px; 
  24.         left:100px; 
  25.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -70px no-repeat; 
  26. } 
  27. div#mask { 
  28.         position:absolute; 
  29.         top:0; 
  30.         left:0; 
  31.         background:#fff; 
  32.         filter:alpha(opacity=60); 
  33.         -moz-opacity:0.2; 
  34.         z-index:100; 
  35. } 
  36. div#login { 
  37.         position:absolute; 
  38.         top:75px; 
  39.         left:100px; 
  40.         width:293px; 
  41.         z-index:200; 
  42. } 
  43. div#login h2 { 
  44.         height:26px; 
  45.         padding-top:3px; 
  46.         padding-left:25px; 
  47.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px -70px no-repeat; 
  48. } 
  49. div#login h2 input { 
  50.         height:18px; 
  51.         width:18px; 
  52.         float:right; 
  53.         border:none; 
  54.         cursor:pointer; 
  55.         margin:2px 6px 0 0; 
  56.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -169px no-repeat; 
  57. } 
  58. div#login h2 a { 
  59.         display:block; 
  60.         float:left; 
  61.         width:83px; 
  62.         height:26px; 
  63.         line-height:26px; 
  64.         text-align:center; 
  65.         text-decoration:none; 
  66.         color:#666; 
  67. } 
  68. div#login h2 a.cur { 
  69.         color:#f00; 
  70.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -187px no-repeat; 
  71. } 
  72. div#login ul { 
  73.         padding:14px 0 18px 12px; 
  74.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') -84px bottom no-repeat; 
  75. } 
  76. div#login ul li { 
  77.         padding-left:60px; 
  78.         margin-top:10px; 
  79.         display:inline-block; 
  80. } 
  81. div#login ul li { 
  82.         display:block; 
  83. } 
  84. div#login ul li:after { 
  85.         content:"youdian"; 
  86.         clear:both; 
  87.         display:block; 
  88.         height:0; 
  89.         visibility:hidden; 
  90. } 
  91. div#login ul li tt { 
  92.         float:left; 
  93.         width:60px; 
  94.         margin-left:-70px; 
  95.         text-align:right; 
  96.         line-height:22px; 
  97.         color:#444; 
  98. } 
  99. div#login ul li div input.cell, div#login ul li div input.cell2 { 
  100.         height:16px; 
  101.         padding:2px; 
  102.         line-height:16px; 
  103.         width:179px; 
  104.         border:1px #dcdcdc solid; 
  105.         color:#666; 
  106. } 
  107. div#login ul li div input.cell2 { 
  108.         width:50px; 
  109. }  
  110. div#login ul li div label { 
  111.         color:#666; 
  112.         cursor:pointer; 
  113. } 
  114. div#login ul li div img { 
  115.         margin-bottom:-7px; 
  116.         margin-left:8px; 
  117. } 
  118. * html div#login ul li div img { 
  119.         margin-bottom:-4px; 
  120. } 
  121. *+html div#login ul li div img { 
  122.         margin-bottom:-4px; 
  123. } 
  124. div#login ul li div input#fnlogin { 
  125.         width:59px; 
  126.         height:21px; 
  127.         cursor:pointer; 
  128.         border:none; 
  129.         margin-right:15px; 
  130.         background:transparent url('http://www.lanrentuku.com/down/js/images/12447121190.png') 0 -148px no-repeat; 
  131. } 
  132. div#login ul li p { 
  133.         padding-top:4px; 
  134.         color:#f00; 
  135. } 
  136. </style> 
  137. </head> 
  138. <body> 
  139. <div id="body"> 
  140. <input id="fnbtn" type="button" title="" /> 
  141. </div><div id="mask" style="display:none;"></div> 
  142. <div id="login" style="display:none;"> 
  143. <h2><input id="fnquit" type="button" title="退出登录" /><a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a></h2> 
  144. <ul><form id="LoginForm" name="LoginForm" action="http://www.lanrentuku.com/"  method="post" enctype="multipart/form-data" ><li><input id="loginType" name="loginType" type="hidden"/><tt><label id="logtype" for="email">Email:</label></tt><div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div></li> 
  145. <li><tt><label for="password">密　码:</label></tt><div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div></li><li><tt></tt> 
  146. <div><input id="reme" name="rememberme" type="checkbox" />　<label for="reme">下次自动登录</label></div></li> 
  147. <li><tt></tt> <div><input id="fnlogin" type="button"/><a href="http://www.lanrentuku.com/" target="_blank" onclick="return checkForgetPassword()">忘记密码?</a></div></li> 
  148. </form></ul> 
  149. </div> 
  150. <script type="text/javascript"> 
  151. function g(obj) { 
  152.         return document.getElementById(obj); 
  153. } 
  154. var login = { 
  155.         title:null, 
  156.         show:function(){ 
  157.                 var sWidth,sHeight; 
  158.                 sWidth = screen.width; 
  159.                 sWidth = document.body.offsetWidth; 
  160.                 sHeight=document.body.offsetHeight; 
  161.                 if (sHeight<screen.height){sHeight=screen.height;} 
  162.                 g("mask").style.width = sWidth + "px"; 
  163.                 g("mask").style.height = sHeight + "px"; 
  164.                 g("mask").style.display = "block"; 
  165.                 g("login").style.display = "block"; 
  166.                 g("login").style.right = g("body").offsetLeft + "px"; 
  167.                  
  168. //                window.status = g("body").offsetLeft; 
  169.         }, 
  170.         hide:function(){ 
  171.                 g("mask").style.display = "none"; 
  172.                 g("login").style.display = "none"; 
  173.         } 
  174. } 
  175. g("fnbtn").onclick = function(){ 
  176.         login.show(); 
  177.         this.blur(); 
  178.         this.style.backgroundPosition = "0 -109px"; 
  179. }; 
  180. g("fnlogin").onclick = function() { 
  181.     // The following 5 lines of code is used to get the login type & pass to the form 
  182.     // One More line of code is insert to root_index.jsp to capture the hidden value 
  183.     if (document.getElementById("logtype").innerHTML == "Email:") { 
  184.         document.getElementById('loginType').value = 'email'; 
  185.     } else { 
  186.         document.getElementById('loginType').value = 'mobile';    
  187.     } 
  188.     document.LoginForm.submit(); 
  189. }; 
  190. g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";}; 
  191. var aa = g("login").getElementsByTagName("a"); 
  192. var aTab = new Array(); 
  193. for(var i=0; i<aa.length; i++){ 
  194.         if(aa[i].parentNode.nodeName == "H2"){ 
  195.                 aTab.push(aa[i]); 
  196.         } 
  197. } 
  198. for(var j=0; j<aTab.length; j++){ 
  199.         aTab[j].onclick = function(){ 
  200.                 this.blur(); 
  201.                 if (this.className != "cur"){ 
  202.                         for(var k=0; k<aTab.length; k++){aTab[k].className = ""}; 
  203.                         this.className = "cur" 
  204.                         g("logtype").innerHTML = this.name + ":"; 
  205.         } 
  206.         } 
  207. } 
  208. </script> 
  209. <script language="javascript"> 
  210. login.hide(); 
  211. </script> 
  212.  
  213. </body> 
  214. </html> 

 

 

posted @ 2014-08-10 10:06  商商-77  阅读(239)  评论(0)    收藏  举报