JavaScript实现点击文字切换登录窗口的方法

2024-05-06 16:19:54

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JavaScript实现点击文字切换登录窗口的方法,涉及javascript操作div层及相关样式的技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现点击文字切换登录窗口的方法。分享给大家供大家参考。具体分析如下：

这是一款动画切换层窗口的特效，点击不同的登录用户会切换到不同的登录窗口，窗口内的内容可以是不一样的，是比较实用的一款代码。

<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>