JavaScript實作點擊文字切換登入視窗的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript實作點擊文字切換登入視窗的方法_javascript技巧

May 16, 2016 pm 03:59 PM

javascript 切換

本文實例講述了JavaScript實作點擊文字切換登入視窗的方法。分享給大家供大家參考。具體分析如下：

這是一款動畫切換層窗口的特效，點擊不同的登入使用者會切換到不同的登入窗口，窗口內的內容可以是不一樣的，是比較實用的一款程式碼。

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;JAVASCRIPT适时切换登录窗口&lt;/title&gt;
&lt;style&gt;
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
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
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&gt;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&gt;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 &lt; 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";
}
&lt;/script&gt;
&lt;div id="menu_0" style="position: absolute; top: 127; left: 176; width: 340; height: 201"&gt;

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

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn