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

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

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

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

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

　　希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-04-26 20:05:06

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

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

本文实例讲述了JavaScript实现点击文字切换登录窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款动画切换层窗口的特效,点击不同的登录用户会切换到不同的登录窗口,窗口内的内容可以是不一样的,是比较实用的一款代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JAVASC

JavaScript实现点击按钮切换网页背景色的方法_javascript技巧

本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

JavaScript实现点击自动选择TextArea文本的方法_javascript技巧

本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascript程序设计有所帮助.

JavaScript实现点击自动选择TextArea文本的方法

  本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascri

JavaScript实现点击单元格改变背景色的方法_javascript技巧

本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t

win7系统下如何快速切换程序窗口的方法

  现在我们使用电脑,经常会同时打开多个窗口,以供我们更加方便的操作电脑,但是窗口一多的话,切换起来就不太方便了,经常需要等待缩略图显示之后,点击相应的窗口才能进行切换,或者是直接使用快捷键来操作,虽然这对于用户来说已经很方便了,但是还有更加方便的操作方法.其实我们可以将程序按钮合并,直接鼠标点击合并按钮就可以切换窗口了,无需等待缩略图的出现.下面小编就来为大家系统的介绍Win7迅速切换程序窗口的操作过程 在Win7中,任务栏相同程序按钮合并是默认设置.用鼠标切换这类程序时需要等略缩图显示之后,

Javascript跳转页面和打开新窗口等方法

  1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面"; 2.在新窗体中打开页面用: window.open('你所要跳转的页面'); window.history.back(-1);返回上一页 3.一些用法 按钮式: <INPUT name="pclog" type="button" value="/GO" onClick="location.href='连接地址'&

javascript鼠标点击文字变文本框代码

 代码如下 复制代码 <style type="text/css">  body{font-size:13px;}  .sortname{height:30px;} </style> <script src="/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"&g

javascript看点击文字弹出层代码

关闭 谢谢光临-- 弹出按钮