jQuery 右下角滑动弹出可关闭重现层完整代码

效果图：

完整代码如下：

<!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><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//www.w3.org"><link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//images.cnblogs.com"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><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><a href="//jiangweishan.com/tags/JQuery/" target="_blank">JQuery</a>右下角<a href="//jiangweishan.com/tags/%E6%BB%91%E5%8A%A8/" target="_blank">滑动</a>弹出可关闭重现层 博客园 计划 <a href="//jiangweishan.com/tags/%E6%95%99%E7%A8%8B/" target="_blank">教程</a></title><meta name="keywords" content="www.jb51.net"><style type="text/css"> *{ <a href="//jiangweishan.com/tags/margin/" target="_blank">margin</a>:0<a href="//jiangweishan.com/tags/px/" target="_blank">px</a>; padding:0px;} #jihuaslide{ <a href="//jiangweishan.com/tags/width/" target="_blank">width</a>:300px; <a href="//jiangweishan.com/tags/height/" target="_blank">height</a>:200px; <a href="//jiangweishan.com/tags/border/" target="_blank">border</a>:1px solid #000; <a href="//jiangweishan.com/tags/position/" target="_blank">position</a>:<a href="//jiangweishan.com/tags/fixed/" target="_blank">fixed</a>; bottom:2px; right:2px; display:none; background-<a href="//jiangweishan.com/tags/color/" target="_blank">color</a>:White;} #jihuaslide a{ position:absolute; top:8px; right:8px; <a href="//jiangweishan.com/tags/font/" target="_blank">font</a>-size:12px; <a href="//jiangweishan.com/tags/text/" target="_blank">text</a>-decoration:none; color:Blue;} #jihuaslide h2{ font-size:24px; text-align:center;<a href="//jiangweishan.com/tags/font-family/" target="_blank">font-family</a>:"<a href="//jiangweishan.com/tags/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91/" target="_blank">微软雅黑</a>";} #reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; <a href="//jiangweishan.com/tags/cursor/" target="_blank">cursor</a>:po<a href="//jiangweishan.com/tags/int/" target="_blank">int</a>er;border:1px solid #000;} </style></head><body><div style="background-color:Green; width:100%;height:150px;">脚本之家</div><div style="background-color:Red; width:100%;height:150px;">欢迎</div><div style="background-color:Yellow; width:100%;height:150px;">hi</div><div style="background-color:Silver; width:100%;height:150px;">计划</div><div style="background-color:Aqua; width:100%;height:150px;">博客园</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;">cnblogs</div><div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div><div style="background-color:Green; width:100%;height:150px;">A</div><div style="background-color:Purple; width:100%;height:150px;">b<a href="//jiangweishan.com/tags/AI/" target="_blank">AI</a>du.com</div><div style="background-color:Green; width:100%;height:150px;">B</div><div style="background-color:Lime; width:100%;height:150px;">hello</div><div style="background-color:Orange; width:100%;height:150px;">Jihua</div><div id="reshow">你快回来</div><div id="jihuaslide"><a href="javaScript:void(0)" id="close">关闭</a><span style=" line-height:50px;">右下角滑动弹出可重现层<a href="//jiangweishan.com/tags/www/" target="_blank">www</a>.jb51.net</span><h2>脚本之家 <a href="//jiangweishan.com/tags/jQuery/" target="_blank">jQuery</a>教程</h2></div><script type="text/javascript"><a href="//jiangweishan.com/tags/function/" target="_blank">function</a> Jihua_Cnblogs_Com() { $("#jihuaslide").slideDown("slow"); $("#reshow").hide(); } $(<a href="//jiangweishan.com/tags/document/" target="_blank">document</a>).ready(function () { <a href="//jiangweishan.com/tags/setTimeout/" target="_blank">setTimeout</a>(function () { Jihua_Cnblogs_Com(); }, 1000) $("#close").click(function () { $("#jihuaslide").slideUp("slow"); $("#reshow").show(); }) $("#reshow").mou<a href="//jiangweishan.com/tags/SEO/" target="_blank">SEO</a>ver(function () { Jihua_Cnblogs_Com(); //www.jb51.net }) }) </script></body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]