| 标题 | jquery右下角自动弹出可关闭的广告层 |
| 范文 | jQuery实现右下角自动弹出可关闭的悬浮提示层特效。这种效果可以使用jQuery弹出层实现。有需要的小伙伴可以参考下。 右下角弹出层后，会在一定时间后自动隐藏。 html代码： <!DOCTYPE HTML> <html xmlns=""> <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>keleyi.com</div> <div>欢迎</div> <div> 一定时间后弹出层会自动隐藏 </div> <div>计划</div> <div>aaaa</div> <div>jihua</div> <div>jb51.net</div> <div>bbbb</div> <div>欢迎光临</div> <div>randomvisit</div> <div>cccc</div> <div>B</div> <div>myslider</div> <div>Jihua</div> <div id="reshow">你快回来</div> <div id="keleyislide"> <a href="javaScript:void(0)" id="close" target="_self">关闭</a> <span>右下角滑动弹出可重现层<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> 以上所述就是本文的全部内容了，希望大家能够喜欢。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。