您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JavaScript实现点击文字切换登录窗口的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文实例讲述了JavaScript实现点击文字切换登录窗口的方法。分享给大家供大家参考。具体分析如下：
这是一款动画切换层窗口的特效，点击不同的登录用户会切换到不同的登录窗口，窗口内的内容可以是不一样的，是比较实用的一款代码。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 <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>- 上一个程序编程： jQuery实现仿腾讯微博滑出效果报告每日天气的方法
- 下一个程序编程： js控制div弹出层实现方法
