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


Posted in Javascript onMay 11, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
js实现点击按钮复制文本功能
Jul 20 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 #Javascript
JS选项卡动态替换banner图片路径的方法
May 11 #Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 #Javascript
javascript中this的四种用法
May 11 #Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python中的itertools的使用详解
2020/01/13 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
研究生自荐信
2013/10/09 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
高中班主任评语大全
2014/04/25 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
护校行动方案
2014/05/31 职场文书
新学期标语
2014/06/30 职场文书
员工安全生产责任书
2014/07/22 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
宣传委员竞选稿
2015/11/19 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
centos7安装mysql5.7经验记录
2022/05/02 Servers
教你如何用cmd快速登录服务器
2022/06/10 Servers