Home > Developer > JavaScript
This article describes the JavaScript implementation of the click Text to switch the login window method. Share to everyone for your reference. The specific analysis is as follows:
This is an Animation switch Layer window special effects, click on different login users will switch to different login window, the contents of the window can be not the same, is a more practical code.
?
| 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 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 5, 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 11 9 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 switch Login window </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; 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 = 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 <) {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:a" Bsolute; top:127; left:176; width:340; height:201 "> <table border=" 0 "width=" 100% "style=" Background-color: #0080C0 "cellspacing=" 0 "cellpadding = "0" height= "> <tr> <td width=" 277 "class=" Out "height=" "style=" Cursor:default "> </td> < TD width= "Class=" "Out" height= "onmousedown=" Show_menu (1,0) "onmouseup=" Returnit () "> Admin </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" &Gt <tr> <td width= "100%" height= "the <form id=", "the" "," the "" "" "" ". left:70; top:10;font-family:arial; Display:none "action=" javascript:; "method=" Post align= "center" > Super admin: <br> <br> Account: <input class= " In "style=" width:100px "size=" > mail.cn<br> password: <input class= "in" type= "password" size= "><BR" > <br> <input class= "Out" onfocus= "This.blur ()" type= "button" value= "Login" > </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= "> <tr> <td width=" 277 "class=" Out "height=" "style=" Cursor:default "> </td> <td Width= "class=" "Out" height= "onmousedown=" Show_menu (0,1) "onmouseup=" Returnit () "> General user </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= "", "> <form id=" form_1 "style=" position:relative; left:70; top:10;font-family:arial; Display:block "action=" javascript:; "method=" Post align= "center" > General User: <br> <br> account: <input class= " In "style=" width:100px "size=" > mail.cn<br> password: <input class= "in" type= "password" size= "><BR" > <br> <input class= "Out" onfocus= "This.blur ()" type= "button" value= "Login" > </form> </td> < /tr> </table> </div> </div> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
