jQuery 右下角滑動彈出可關閉重現層完整程式碼_jquery

效果圖：

完整程式碼如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>jquery右下角滑動彈出可關閉重現層 博客園 計劃 教程<meta name="keywords" content="www.jb51.net"> <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> <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;"> </div>hi<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;"> </div>jihua<div style="background-color:Green; width:100%;height:150px;"> </div>jb51.net<div style="background-color:Blue; width:100%;height:150px;"> </div>cnblogs<div style="background-color:Olive; width:100%;height:150px;"> </div>歡迎光臨<div style="background-color:Green; width:100%;height:150px;"> </div>A<div style="background-color:Purple; width:100%;height:150px;"> </div>baidu.com<div style="background-color:Green; width:100%;height:150px;"> </div>B<div style="background-color:Lime; width:100%;height:150px;"> </div>hello<div style="background-color:Orange; width:100%;height:150px;"> </div>Jihua<div id="reshow"> </div>你快回來<div id="jihuaslide"> <a href="javaScript:void(0)" id="close"> </a>關閉<span style=" line-height:50px;"> </span>右下角滑動彈出可重現層 www.jb51.net<h2> </h2>腳本之家 jquery教學</div>
[Ctrl A 全選 註:

如需引入外部Js需刷新才能執行]