jQuery 右下角滑动弹出可关闭重现层完整代码 时间:2020-05-13 人气:0 效果图： 完整代码如下： <!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" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title>jquery右下角滑动弹出可关闭重现层 博客园 计划 教程</title> <meta name="keywords" content="www.qb5200.com"/> <style type="text/css"> *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;} #jihuaslide 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></div> <div>欢迎</div> <div>hi</div> <div>计划</div> <div>博客园</div> <div>jihua</div> <div>jb51.net</div> <div>cnblogs</div> <div>欢迎光临</div> <div>A</div> <div>baidu.com</div> <div>B</div> <div>hello</div> <div>Jihua</div> <div>你快回来</div> <div> <a href="javaScript:void(0)" id="close">关闭</a> <span style=" line-height:50px;">右下角滑动弹出可重现层 www.qb5200.com</span> <h2> jquery教程</h2> </div> <script type="text/javascript"> function Jihua_Cnblogs_Com() { $("#jihuaslide").slideDown("slow"); $("#reshow").hide(); } $(document).ready(function () { setTimeout(function () { Jihua_Cnblogs_Com(); }, 1000) $("#close").click(function () { $("#jihuaslide").slideUp("slow"); $("#reshow").show(); }) $("#reshow").mouseover(function () { Jihua_Cnblogs_Com(); //www.qb5200.com }) }) </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容
