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

更新时间：2012年10月10日 22:42:20 作者：

经常看到网页右下角有滑动弹出的广告，这种效果可以使用jQuery弹出层实现。本实例使用jQuery实现右下角滑动弹出可关闭重现层

效果图：

完整代码如下：

<!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.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> </head> <body> <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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery实现图片跟随鼠标的实例
这篇文章主要介绍了 jquery实现图片跟随鼠标的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
2017-10-10
Jquery 过滤器(first,last,not,even,odd)的使用
Jquery 过滤器，顾名思义就是过滤一些不需要的元素，主要有first,last,not,even,odd等等，下面有个使用示例，大家可以感受下
2014-01-01
jQuery ajax BUG：object doesn''t support this property or met
使用$.ajax时出现的错误，IE7下才会出错，IE6,IE8都正常。
2010-07-07
JQuery中ajax方法访问web服务实例
这篇文章主要介绍了JQuery中ajax方法访问web服务的方法,实例分析了jquery中Ajax方法结合asp.net程序处理web访问的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
基于jQuery实现的设置文本区域的光标位置
之前做一个代码提示的功能涉及到在文本框中插入文本的操作,需要获得当前光标位置插入文本,本文章向大家介绍jQuery如何设置文本区域的光标位置，需要的朋友可以参考一下
2018-06-06
JQuery触发事件例如click
JQuery触发事件的通常写法，比如click事件的触发如下所示，感兴趣的朋友可以参考下
2013-09-09
jquery ready()的几种实现方法小结
下面是目前本人知道的几种jQuery的ready ()的写法.如果还有其他的写法，望告知
2010-06-06
jQuery实现判断滚动条滚动到document底部的方法分析
这篇文章主要介绍了jQuery实现判断滚动条滚动到document底部的方法,结合实例形式分析了jQuery事件响应及针对页面元素属性判断的相关操作技巧,需要的朋友可以参考下
2019-08-08
Jquery+WebService 校验账号是否已被注册的代码
在Javascirpt代码中，调用Jquery的方法$.Ajax(function)实现Ajax,传递账号信息给Web服务，Web服务再调用数据库操作类查询数据库，并返回数据给前台页面。
2010-07-07
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
本文主要介绍了利用构造函数和原型创建对象以实现继承，并附上完成简单轮播对象的封装的示例代码。有兴趣的朋友可以看下
2016-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具