This article describes the CSS+JS implementation of the click Text pop-up timer automatically closed div Layer Menu method. Share to everyone for your reference. The specific analysis is as follows:
Here with CSS+JS to achieve click Text after the animation to expand a div layer menu, the expiration will automatically shut down, is the CSS combined with the effect of JS implementation.
?
| 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 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>css+js pop-up div layer </title> <script type=" Text/javascript "> var w = 0; var h = 0; var mout; function emotion () {var omenu = document.getElementById ("menu"); if (w <=) {oMenu.style.display = "block"; Fnlarge (); } else{Fnsmall ();} function Fnlarge () {var omenu = document.getElementById ("menu"), if (W <) {W + = = = = w+ " PX "; OMenu.style.height = h+ "px"; Window.settimeout ("Fnlarge ()", 10); The function Fnsmall () {var omenu = document.getElementById ("menu"); if (W > 0) {w = h = = = = W + "px"; OMenu.style.height = h+ "px"; Window.settimeout ("Fnsmall ()", 5); } else{OMenu.style.display = "None";}} </script> <style type= "Text/css" > body{ Text-align:center; p{cursor:pointer; margin:0 padding:0; font-size:24px; display:inline;} div a:link, div a:visited{color: #666 t Ext-decoration:none; div a:hover{color: #FF6600; text-decoration:underline} div{border:2px solid #666 background: #fff; margin:5px au to; Overflow:hidden; Display:none; padding:5px 10px; ul,li{margin:0 padding:0;} li{list-style:none; width:70px;} li.title{font-weight:bold;} </style> </h ead> <body> <p onclick= "emotion ();" > Click on this line of text try!</p> <div id= "menu" onmouseout= "Javascript:mout=settimeout (' Fnsmall () ', 2111);" Onmouseover= " Javascript:cleartimeout (mout); " > <table border= "0" cellspacing= "0" cellpadding= "0" > <tr> <td width= "" "valign=" Top "align=" left " > <ul> <li class= "title" >ASP</li> <li><a href= "# onclick=" Fnsmall (); " > News </a></li> <li><a href= "#" onclick= "Fnsmall ();" > Forum </a></li> <li><a href= "#" ONclick= "Fnsmall ();" >CMS</a></li> <li></li> </ul></td> <td width= "valign=" Top "align=" left "> <ul> <li class=" title ">PHP</li> <li><a href=" # "onclick=" Fnsmall (); " > Articles </a></li> <li><a href= "#" onclick= "Fnsmall ();" > Chat </a></li> <li><a href= "#" onclick= "Fnsmall ();" > Plugin </a></li> <li><a href= "#" onclick= "Fnsmall ();" > Enterprise </a></li> </ul> </td> <td width= "valign=" "Top" align= "left" > <ul> <li class= "title" >JSP</li> <li><a href= "#" onclick= "Fnsmall ();" >AJAX</a></li> <li><a href= "#" onclick= "Fnsmall ();" >JQUERY</a></li> <li><a href= "#" onclick= "Fnsmall ();" >MYSQL</a></li> <li><a href= "#" onclick= "Fnsmall ();" >JAVA</a></li> </ul> </td> </tr> </table> </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
