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

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

完整代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 6 <title>jquery右下角滑动弹出可关闭重现层 博客园 计划 教程</title>
 7 <meta name="keywords" content="www.cnblogs.com/jihua"/>
 8 <style type="text/css">
 9     *{ margin:0px; padding:0px;}
10     #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;}
11     #jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;}
12     #jihuaslide h2{ font-size:24px; text-align:center;font-family:"微软雅黑";}
13     #reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; cursor:pointer;border:1px solid #000;}
14 </style>
15 </head>
16
17 <body>
18 <div style="background-color:Green; width:100%;height:150px;">jihua.cnblogs.com</div>
19 <div style="background-color:Red; width:100%;height:150px;">欢迎</div>
20 <div style="background-color:Yellow; width:100%;height:150px;">hi</div>
21 <div style="background-color:Silver; width:100%;height:150px;">计划</div>
22 <div style="background-color:Aqua; width:100%;height:150px;">博客园</div>
23 <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div>
24 <div style="background-color:Green; width:100%;height:150px;">cnblogs.com</div>
25 <div style="background-color:Blue; width:100%;height:150px;">cnblogs</div>
26 <div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div>
27 <div style="background-color:Green; width:100%;height:150px;">A</div>
28 <div style="background-color:Purple; width:100%;height:150px;">jihua.cnblogs.com</div>
29 <div style="background-color:Green; width:100%;height:150px;">B</div>
30 <div style="background-color:Lime; width:100%;height:150px;">hello</div>
31 <div style="background-color:Orange; width:100%;height:150px;">Jihua</div>
32 <div id="reshow">你快回来</div>
33     <div id="jihuaslide">
34         <a href="javaScript:void(0)" id="close">关闭</a>
35         <span style=" line-height:50px;">右下角滑动弹出可重现层<br />jihua.cnblogs.com</span>
36         <h2>博客园 计划 教程</h2>
37     </div>
38     <script type="text/javascript">
39         function Jihua_Cnblogs_Com() { $("#jihuaslide").slideDown("slow"); $("#reshow").hide(); }
40         $(document).ready(function () {
41             setTimeout(function () {
42                 Jihua_Cnblogs_Com();
43             }, 1000)
44             $("#close").click(function () {
45                 $("#jihuaslide").slideUp("slow"); $("#reshow").show();
46             })
47             $("#reshow").mouseover(function () {
48                 Jihua_Cnblogs_Com(); //jihua.cnblogs.com
49              })
50         })
51     </script>
52 </body>
53 </html>

实际效果请看本网页的右下角。效果图：

你快回来

关闭右下角滑动弹出可重现层
jihua.cnblogs.com

博客园计划教程

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

jquery右下角自动弹出关闭层
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/36.htm 右下角弹出层后,会在一定时间后自动隐藏.第一版本:http://www.cnblogs.com/ ...
去除迅雷右下角自动弹出的Flash广告
我们在使用迅雷的时候桌面右下角老是跳出烦人的广告于是我就在网上找到了去除广告的方法你一定会说下一个无广告版的不就行了我建议你不要这样做,因为那是黑客修改过的,万一里面放了木马啥的你就惨了还是不 ...
Android仿QQ列表滑动弹出按钮、长按提示、刷新列表
为什么80%的码农都做不了架构师?>>> 原理: ScrollView(刷新) + ListView(弹出按钮) 说明:由于能力有限,刷新和滑动弹出按钮都是第三方的libra ...
Android之软键盘自动弹出和关闭
一:软键盘自动弹出. private EditText top_middle;//输入框//-------------------------------------弹出软键盘------------ ...
Android 软键盘自动弹出和关闭
在我们写修改信息或者搜索,修改密码等界面的时候,用户进入这个界面的主要目的就是输入修改/查找某些信息,为了用户体验应该自动弹出软键盘而不是让用户主动点击输入框才弹出. 1.软键盘的自动弹出 priv ...
右下角自动弹出广告的删除
1.发现:最近不知道何时中了一个很讨厌的软件,表现为系统运行中右下角会不定时间自动弹出广告窗口,比如XX彩信.XX交友之类的,内容图片比较低俗. 2.分析:起初以为是腾迅的新花招,后来发现即 ...
如何让光驱自动弹出和关闭？
想要自动弹出光驱?那么请使用下面的方法一或者方法二. 既想自动弹出光驱,又想自动关闭光驱?请使用下面的方法二. 方法一: 请前往 http://cid-3222d068881c5251.skydriv ...
如何在关闭窗口的时候，不让浏览器自动弹出确认关闭对话框
window.opener=null;window.close(); 转载于:https://www.cnblogs.com/FrameWork/archive/2006/11/27/574153.h ...
单个页面多个按钮调用同一个弹窗，和滚屏展示效果，关闭后，5秒自动弹出滚屏展示！
文件包 http://download.csdn.net/download/cplvfx/10266503 HTML代码 <!DOCTYPE html> <html><h ...

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

博客园计划教程

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

最新文章

热门文章

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

博客园 计划 教程

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

最新文章

热门文章

博客园计划教程