今天看啥
热点:

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程序设计有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/Javascript/998375.htmlTechArticleJavaScript实现点击文字切换登录窗口的方法 本文实例讲述了JavaScript实现点击文字切换登录窗口的方法。分享给大家供大家参考。具体分析如...

相关文章

相关搜索: JavaScript 文字

帮客评论

视觉看点