网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 网站常用 >> 正文
最新文章
· JavaScript实现文本段落折叠展开和收
· 拖动滑块选择范围的网页插件代码
· JS版元素周期表
· jQuery数字统计并生成进度条动画的代
· 一个不错的CSS分页样式
· 实用的Flash全屏和退出全屏切换效果
· 纯CSS实现三列DIV等高布局
· jquery四色网页换肤代码
· 可展开和收起的在线客服代码
· 功能强大的漂亮计算器
热门文章
 登录时用Cookie保存用户名和密码
 获取16进制颜色值的取色器
 一个小型的JS在线文本编辑器
 JavaScript实现文本段落折叠展开和
 利用js给li标签添加序号
 通过QQ查询QQ用户的头像、昵称、地
 可展开和收起的在线客服代码
 js取色器
 基于jQuery的对象切换插件soChange
 javascript让状态栏不显示链接地址
相关文章
没有相关文章
同一页面实现两种角色切换登陆界面
来源:数据大全网 更新时间:2009/7/18 18:02:00 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<html> 
<head>  
<title>登陆菜单,两个窗口进行切换</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<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>
<script>
var temp_num = null;
var now_num  = null;

var the_top = 127;  //表单的最高,最低
var the_bottom = 146 

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>

</head> 
<body bgcolor="#005588">

<div id="menu_0" style="position: absolute; top: 127; left: 176; width: 339;">

<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"><A href="http://www.sql163.com" target="_blank">数据大全网</A></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">

<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"><A href="http://www.sql163.com" target="_blank">数据大全网</A></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>

△运行 ☉预览 #复制 +收藏
特效说明:
同一页面实现两种角色切换登陆界面
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号