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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
js创建对象的方法汇总
Jan 07 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue项目实战总结篇
Feb 11 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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自动识别字符集并完成转码详解
2013/08/02 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
详解JS预解析原理
2020/06/16 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python 切分数组实例解析
2019/11/07 Python
python中的逆序遍历实例
2019/12/25 Python
python3.7调试的实例方法
2020/07/21 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
医德医风个人总结
2015/02/28 职场文书
自主招生专家推荐信
2015/03/26 职场文书
元宵节晚会主持词
2015/07/01 职场文书
七年级作文之雪景
2019/11/18 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis