Kaedah JavaScript untuk menukar tetingkap log masuk dengan mengklik pada kemahiran text

Kaedah JavaScript untuk menukar tetingkap log masuk dengan mengklik pada kemahiran text_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 15:59:56

asal

1516 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan JavaScript untuk menukar tetingkap log masuk dengan mengklik teks. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Ini adalah kesan khas untuk animasi menukar tetingkap lapisan Mengklik pada pengguna log masuk yang berbeza akan bertukar ke tetingkap log masuk yang berbeza. Ini adalah kod yang lebih praktikal.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPT适时切换登录窗口</title>
<style>
TD{
font-size: 9pt; color: #66DDDD}
.out{
font-size: 9pt; color: #66DDDD;border-width:1px;
border-style:solid;border-color:0090c0 0070b0 0070b0 0090c0;
cursor:hand; background:0080c0; text-align: center
}
.out2 {
text-align: center}
.in,.out2{
font-size: 9pt; color: #66DDDD;border-width:1px;
border-style:solid;border-color:0070b0 0090c0 0090c0 0070b0;
background:0078b8;cursor:default
}
</style>
</head>
<body>
<script>
var temp_num = null;
var now_num = null;
var the_top = 130; 
var the_bottom = 150 
var no_can_do = false;
function Show_menu(u_num,d_num)
{
event.srcElement.className = "out2";
if(no_can_do)
{
return;
} 
now_num = d_num;
if(temp_num) 
{
if(document.getElementById("menu_"+temp_num).doing)
{
clearInterval(document.getElementById("menu_"+temp_num).doing);
}
}
else
{
temp_num = u_num;
}
document.getElementById("menu_"+temp_num).doing = setInterval("set_menu()",10);
}
function set_menu()
{
no_can_do = true;
document.getElementById("form_"+temp_num).style.display = "none";
var if_move = document.getElementById("div_"+temp_num).style.pixelHeight - 6;
if(if_move>1)
{
document.getElementById("div_"+temp_num).style.pixelHeight = if_move;
}
else
{
document.getElementById("div_"+temp_num).style.pixelHeight = 1;
var if_stop = document.getElementById("menu_"+temp_num).style.pixelTop - 1;
if(if_stop>the_top)
{
document.getElementById("menu_"+temp_num).style.pixelTop = if_stop;
document.getElementById("menu_"+now_num).style.pixelTop += 1;
}
else
{
document.getElementById("menu_"+temp_num).style.pixelTop = the_top;
document.getElementById("menu_"+now_num).style.pixelTop = the_bottom;
var if_end = document.getElementById("div_"+now_num).style.pixelHeight + 6;
if(if_end < 182)
{
document.getElementById("div_"+now_num).style.pixelHeight = if_end
}
else
{
document.getElementById("div_"+now_num).style.pixelHeight = 182;
clearInterval(document.getElementById("menu_"+temp_num).doing);
document.getElementById("menu_"+temp_num).doing = false;
document.getElementById("form_"+now_num).style.display = "block";
temp_num = null;
no_can_do = false;
}
}
}
}
function returnIT()
{
event.srcElement.className = "out";
}
</script>
<div id="menu_0" style="position: absolute; top: 127; left: 176; width: 340; height: 201">

<table border="0" width="100%" style="background-color: #0080C0" cellspacing="0" cellpadding="0" height="19">
 <tr>
  <td width="277" class="out" height="19" style="cursor: default"> </td>
  <td width="58" class="out" height="19" onmousedown="Show_menu(1,0)" onmouseup="returnIT()">管理员</td>
 </tr>
</table>
<div id="div_0" style="position: relative; width: 339; height: 1; overflow: hidden">
<table border="0" width="100%" style="background-color: #0080C0" cellspacing="0" cellpadding="0" height="182">
 <tr>
  <td width="100%" height="182">
   <form id="form_0" style="position: relative; left:70; top:10;font-family: Arial; display: none" 
   action="javascript:;" method="post" align="center">
    超级管理员：
  <br>
    <br>
    帐号: <input class="in" style="WIDTH: 100px" size="20"> mail.cn<br>             
    密码: <input class="in" type="password" size="20"><br>
    <br>        
    <input class="out" onfocus="this.blur()" type="button" value="登录">     
   </form>
   　</td>
 </tr>
</table>
</div>
</div>
<div id="menu_1" style="position: absolute; top: 146; left: 176; width: 339; height: 219">
<table border="0" width="100%" style="background-color: #0080C0" cellspacing="0" cellpadding="0" height="19">
 <tr>
  <td width="277" class="out" height="19" style="cursor: default"> </td>
  <td width="58" class="out" height="19" onmousedown="Show_menu(0,1)" onmouseup="returnIT()">一般用户</td>
 </tr>
</table>
<div id="div_1" style="position: relative; width: 339; height: 182; overflow: hidden">
<table border="0" width="100%" style="background-color: #0080C0" cellspacing="0" cellpadding="0" height="100%">
 <tr>
  <td width="100%" height="182">
   <form id="form_1" style="position: relative; left:70; top:10;font-family: Arial; display: block" action="javascript:;"
    method="post" align="center">
一般用户：
  <br>
    <br>
    帐号: <input class="in" style="WIDTH: 100px" size="20"> mail.cn<br>             
    口令: <input class="in" type="password" size="20"><br>
    <br>
    <input class="out" onfocus="this.blur()" type="button" value="登录">     
   </form>
   　</td>
 </tr>
</table>
</div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.