jquery implementation of the lower right corner automatically pop-up can be turned off the suspension hint layer effects. This effect can be implemented using the jquery pop-up layer. The need for small partners can refer to the following.
The bottom right corner of the pop-up layer will be automatically hidden after a certain amount of time.
HTML 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 | <! DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta charset= "UTF-8" > < Title>jquery the lower right corner automatically pops off layer </title><base target= "_blank"/> <script type= "text/javascript" src= "jquery /jquery-1.11.2.min.js "></script> <style type=" Text/css "> * {margin:0px; padding:0px;} a {color:black;} #keleyislide {width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:no Ne Background-color:white; z-index:9999; } #keleyislide a {position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:blue;} #keleyislide h2 {font-size:24px; Text-align:center font-family: "Microsoft Ya Hei";} #reshow {position:fixed; ri ght:2px; bottom:2px; font-size:12px; Display:none; Background-color:white; Cursor:pointer; border:1px solid #000; } </style> </head> <body> <div style= "Background-color:green; width:100%;height:150px; ">keleyi.com</div> <div style= "background-color:red; width:100%;height:150px; " > Welcome </div> <div style= "Background-color:yellow; width:100%;height:150px; " > A certain time after the pop-up layer will automatically hide </div> <div style= "background-color:silver;" width:100%;height:150px; " > Plan </div> <div style= "Background-color:aqua; width:100%;height:150px; " >aaaa</div> <div style= "Background-color:fuchsia; width:100%;height:150px; " >jihua</div> <div style= "Background-color:green; width:100%;height:150px; " >jb51.net</div> <div style= "Background-color:blue; width:100%;height:150px; " >bbbb</div> <div style= "background-color:olive; width:100%;height:150px; " > Welcome to </div> <div style= "Background-color:green; width:100%;height:150px; " >randomvisit</div> <div style= "background-color:purple; width:100%;height:150px; " >cccc</div> <div style= "Background-color:green; width:100%;height:150px; " >B</div> <div style= "backgrOund-color:lime; width:100%;height:150px; " >myslider</div> <div style= "Background-color:orange; width:100%;height:150px; " >Jihua</div> <div id= "Reshow" > You come back </div> <div id= "Keleyislide" > <a href= "javaScript: void (0) "id=" Close "target=" _self "> Off </a> <span style=" line-height:50px " > Lower right corner slide eject reproducible layer <br/></span> </div> <script type= "Text/javascript" > Function Jihua_cnblogs_ Com () {$ ("#kel" + "Eyislide"). Slidedown ("slow"); $ ("#reshow"). Hide ()} function Keleyiautohide () {$ ("#ke" + "Leyislide" ). Slideup ("slow"); $ ("#reshow"). Show (); } $ (document). Ready (function () {settimeout (function () {jihua_cnblogs_com ();}, 1000) settimeout (function () {Keleyiau Tohide (); },9000) $ ("#close"). Click (function () {keleyiautohide ();}) $ ("#reshow"). MouseOver (function () {jihua_cnblogs_com ();}) }) </script> </body> </html> |
The above is the entire contents of this article, I hope you can enjoy.
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
