萬盛學電腦網 >> 腳本專題 >> javascript >> jquery右下角自動彈出可關閉的廣告層
jquery右下角自動彈出可關閉的廣告層
jQuery實現右下角自動彈出可關閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實現。有需要的小伙伴可以參考下。
右下角彈出層後，會在一定時間後自動隱藏。
html代碼：
?
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 <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自動彈出關閉層</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: none; 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: "微軟雅黑"; } #reshow { position: fixed; right: 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;">歡迎</div> <div style="background-color:Yellow; width:100%;height:150px;"> 一定時間後彈出層會自動隱藏 </div> <div style="background-color:Silver; width:100%;height:150px;">計劃</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;">歡迎光臨</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">你快回來</div> <div id="keleyislide"> <a href="javaScript:void(0)" id="close" target="_self">關閉</a> <span style=" line-height:50px;">右下角滑動彈出可重現層<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 () { KeleyiAutoHide(); },9000) $("#close").click(function () { KeleyiAutoHide(); }) $("#reshow").mouseover(function () { Jihua_Cnblogs_Com(); }) }) </script> </body> </html>以上所述就是本文的全部內容了，希望大家能夠喜歡。
javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved