下面是完整代碼，保存到html文件就可以了。效果請看右下角。
<!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 src="http:///keleyi/pmedia/jquery-1.8.2.min.js"></script>
<title>jquery右下角滑動彈出可關閉重現層 juqery 實例</title>
<meta name="keywords" content="www.cnblogs.com/jihua"/>
<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 style="background-color:Green; width:100%;height:150px;">jihua.cnblogs.com</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;">cnblogs.com</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;">jihua.cnblogs.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;">右下角滑動彈出可重現層<br />www.</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(); //jihua.cnblogs.com
})
})
</script>
</body>
</html>
原文地址:http://www.cnblogs.com/jihua/archive/2012/10/10/youxiajiao.html
下面是原文效果。
jihua.cnblogs.com
歡迎
hi
計劃
博客園
jihua
cnblogs.com
cnblogs
歡迎光臨
A
jihua.cnblogs.com
B
hello
Jihua
你快回來
關閉
右下角滑動彈出可重現層
www.
jquery 實例