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 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
javascript实现计算器功能详解流程
Nov 01 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
js函数般调用正则
2008/04/08 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
简明 Python 基础学习教程
2007/02/08 Python
linux下安装easy_install的方法
2013/02/10 Python
python实现图片批量剪切示例
2014/03/25 Python
python提取内容关键词的方法
2015/03/16 Python
python常用函数详解
2016/09/13 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
抢劫罪辩护词
2015/05/21 职场文书
纪录片信仰观后感
2015/06/08 职场文书