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

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

WBOY

Lepaskan： 2016-05-16 17:49:29

asal

784 orang telah melayarinya

效果图：
jQuery 右下角滑动弹出可关闭重现层完整代码_jquery
完整代码如下：

<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;">baidu.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;">右下角滑动弹出可重现层
www.jb51.net</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.jb51.net 
}) 
}) 
</script>

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