当前位置：Gxlcms > JavaScript > jQuery 右下角滑动弹出可关闭重现层完整代码

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

时间：2021-07-01 10:21:17 帮助过：4人阅读

效果图：

完整代码如下：

<!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.gxlcms.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> 
脚本之家 
欢迎 
hi 
计划 
博客园 
jihua 
jb51.net 
cnblogs 
欢迎光临 
A 
baidu.com 
B 
hello 
Jihua 
你快回来 
 
关闭 
<span style=" line-height:50px;">右下角滑动弹出可重现层
www.gxlcms.com</span> 
<h2>脚本之家 jquery教程</h2> 
 
<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.gxlcms.com 
}) 
}) 
</script> 
</body> 
</html>

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

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

人气教程排行