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>