JavaScript实现点击文字切换登录窗口的方法
本文实例讲述了JavaScript实现点击文字切换登录窗口的方法。分享给大家供大家参考。具体分析如下：
这是一款动画切换层窗口的特效，点击不同的登录用户会切换到不同的登录窗口，窗口内的内容可以是不一样的，是比较实用的一款代码。
<html>
<head>
<metahttp-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:0090c00070b00070b00090c0;
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:0070b00090c00090c00070b0;
background:0078b8;cursor:default
}
</style>
</head>
<body>
<script>
vartemp_num=null;
varnow_num=null;
varthe_top=130;
varthe_bottom=150
varno_can_do=false;
functionShow_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);
}
functionset_menu()
{
no_can_do=true;
document.getElementById("form_"+temp_num).style.display="none";
varif_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;
varif_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;
varif_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;
}
}
}
}
functionreturnIT()
{
event.srcElement.className="out";
}
</script>
<divid="menu_0"style="position:absolute;top:127;left:176;width:340;height:201">
<tableborder="0"width="100%"style="background-color:#0080C0"cellspacing="0"cellpadding="0"height="19">
<tr>
<tdwidth="277"class="out"height="19"style="cursor:default"></td>
<tdwidth="58"class="out"height="19"onmousedown="Show_menu(1,0)"onmouseup="returnIT()">管理员</td>
</tr>
</table>
<divid="div_0"style="position:relative;width:339;height:1;overflow:hidden">
<tableborder="0"width="100%"style="background-color:#0080C0"cellspacing="0"cellpadding="0"height="182">
<tr>
<tdwidth="100%"height="182">
<formid="form_0"style="position:relative;left:70;top:10;font-family:Arial;display:none"
action="javascript:;"method="post"align="center">
超级管理员：
<br>
<br>
帐号:<inputclass="in"style="WIDTH:100px"size="20">mail.cn<br>
密码:<inputclass="in"type="password"size="20"><br>
<br>
<inputclass="out"onfocus="this.blur()"type="button"value="登录">
</form>
</td>
</tr>
</table>
</div>
</div>
<divid="menu_1"style="position:absolute;top:146;left:176;width:339;height:219">
<tableborder="0"width="100%"style="background-color:#0080C0"cellspacing="0"cellpadding="0"height="19">
<tr>
<tdwidth="277"class="out"height="19"style="cursor:default"></td>
<tdwidth="58"class="out"height="19"onmousedown="Show_menu(0,1)"onmouseup="returnIT()">一般用户</td>
</tr>
</table>
<divid="div_1"style="position:relative;width:339;height:182;overflow:hidden">
<tableborder="0"width="100%"style="background-color:#0080C0"cellspacing="0"cellpadding="0"height="100%">
<tr>
<tdwidth="100%"height="182">
<formid="form_1"style="position:relative;left:70;top:10;font-family:Arial;display:block"action="javascript:;"
method="post"align="center">
一般用户：
<br>
<br>
帐号:<inputclass="in"style="WIDTH:100px"size="20">mail.cn<br>
口令:<inputclass="in"type="password"size="20"><br>
<br>
<inputclass="out"onfocus="this.blur()"type="button"value="登录">
</form>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。