Heim > Artikel > Web-Frontend > JavaScript实现点击文字切换登录窗口的方法_javascript技巧
JavaScript实现点击文字切换登录窗口的方法_javascript技巧
- WBOYOriginal
- 2016-05-16 15:59:561428Durchsuche
本文实例讲述了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>
希望本文所述对大家的javascript程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：AngularJS基础学习笔记之指令_AngularJSNächster Artikel：jQuery实现页面内锚点平滑跳转特效的方法总结_jquery