教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jQuery 右下角滑动弹出可关闭重现层完整代码

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

发布时间:2013-09-27   编辑:jiaochengji.com
经常看到网页右下角有滑动弹出的广告,这种效果可以使用jQuery弹出层实现。本实例使用jQuery实现右下角滑动弹出可关闭重现层
效果图:

完整代码如下:
jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ 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;}
脚本之家
欢迎
hi
计划
博客园
jihua
jb51.net
cnblogs
欢迎光临
A
baidu.com
B
hello
Jihua
你快回来
关闭 右下角滑动弹出可重现层 www.jb51.net 脚本之家 jquery教程
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 }) })
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:
jQuery 右下角滑动弹出可关闭重现层完整代码
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
jQuery实现单行文字间歇向上滚动源代码
jQuery弹出窗口完整代码(居中,居左,居右)
jquery弹出关闭遮罩层实现代码
基于jQuery的网页右下角弹出广告(IE7,firefox)
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
点击弹出层外区域关闭弹出层jquery特效示例

关键词: 右下角  滑动弹出  可关闭   
[关闭]
~ ~