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 相关文章推荐
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
javascript+Canvas实现画板功能
Jun 23 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错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
laravel model 两表联查示例
2019/10/24 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
关于js datetime的那点事
2011/11/15 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
抽样调查项目计划书
2014/04/24 职场文书
道路施工安全责任书
2014/07/24 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
世界红十字日活动总结
2015/02/10 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL