jquery右下角自动弹出可关闭的广告层

 　　jQuery实现右下角自动弹出可关闭的悬浮提示层特效。这种效果可以使用jQuery弹出层实现。有需要的小伙伴可以参考下。

　　右下角弹出层后，会在一定时间后自动隐藏。

　　html代码：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>jquery右下角自动弹出关闭层</title><base target="_blank"/>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
a {color:black;
}
#keleyislide {
width: 300px;
height: 200px;
border: 1px solid #000;
position: fixed;
bottom: 2px;
right: 2px;
display: none;
background-color: White;
z-index:9999;
}
 
#keleyislide a {
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
text-decoration: none;
color: Blue;
}
 
#keleyislide 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;">keleyi.com</div>
<div style="background-color:Red; width:100%;height:150px;">欢迎</div>
<div style="background-color:Yellow; width:100%;height:150px;"> 一定时间后弹出层会自动隐藏
</div>
<div style="background-color:Silver; width:100%;height:150px;">计划</div>
<div style="background-color:Aqua; width:100%;height:150px;">aaaa</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;">bbbb</div>
<div style="background-color:Olive; width:100%;height:150px;">欢迎光临</div>
<div style="background-color:Green; width:100%;height:150px;">randomvisit</div>
<div style="background-color:Purple; width:100%;height:150px;">cccc</div>
<div style="background-color:Green; width:100%;height:150px;">B</div>
<div style="background-color:Lime; width:100%;height:150px;">myslider</div>
<div style="background-color:Orange; width:100%;height:150px;">Jihua</div>
<div id="reshow">你快回来</div>
<div id="keleyislide">
<a href="javaScript:void(0)" id="close" target="_self">关闭</a>
<span style=" line-height:50px;">右下角滑动弹出可重现层<br /></span>
</div>
<script type="text/javascript">
function Jihua_Cnblogs_Com() { $("#kel"+"eyislide").slideDown("slow"); $("#reshow").hide(); }
function KeleyiAutoHide() { $("#ke"+"leyislide").slideUp("slow"); $("#reshow").show(); }
$(document).ready(function () {
setTimeout(function () {
Jihua_Cnblogs_Com();
}, 1000)
setTimeout(function () { KeleyiAutoHide(); },9000)
$("#close").click(function () {
KeleyiAutoHide();
})
$("#reshow").mouseover(function () {
Jihua_Cnblogs_Com(); })
})
</script>
</body>
</html>

　　以上所述就是本文的全部内容了，希望大家能够喜欢。

时间： 2024-11-03 21:44:53

jquery右下角自动弹出可关闭的广告层的相关文章

jquery右下角自动弹出可关闭的广告层_jquery

右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip

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

欢迎 hi 计划 博客园 jihua jb51.net cnblogs 欢迎光临 A baidu.com B hello Jihua 你快回来 关闭 右下角滑动弹出可重现层 www.jb51.net jquery教程

Android 软键盘自动弹出与关闭实例详解

Android 软键盘自动弹出与关闭 在我们写修改信息或者搜索,修改密码等界面的时候,用户进入这个界面的主要目的就是输入修改/查找 某些信息,为了用户体验应该自动弹出软键盘而不是让用户主动点击输入框才弹出. 1.软键盘的自动弹出 private void showKeyboard(){ InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE

Android之软键盘自动弹出和关闭【代码分享】

一:软键盘自动弹出. private EditText top_middle;//输入框 //-------------------------------------弹出软键盘----------------------------------- top_middle.setFocusable(true); top_middle.setFocusableInTouchMode(true); top_middle.requestFocus(); InputMethodManager inputM

Win7拨号连接自动弹出如何关闭

  1.当你不知道哪里设置时,你可以等它跳出来再进行设置,以下是不定时弹出的提示框,只要你点击设置就跟正常系统设置是一样的; 2.进入设置后,我们可以看到拨号和虚拟专用网络设置里有个宽带连接,就是有了宽带连接才导致提示窗口不停的跳出来,而如果删除那么你要进行拨号时又要进行创建,比较麻烦. 3.在中间你可以看到3个选项,关于拨号连接提示的选项,默认是选择"不论网络连接是否存在都进行拨号",说明你不上网连接也要拨号,也就是说拨号连接断开状态就会提示拨号; 4.那么我们就选择"从不

jQuery实现点击按钮弹出可关闭层的浮动层插件_jquery

本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具

Jquery实现顶部弹出框特效_jquery

Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示. Html代码 <div class="tooltiptop"> <div class="bg"></div> <div class="main"><i>Jq顶部弹出框</i><span onClick="ToolTipTop.Hide();" title="关闭

jquery简单的弹出层浮动层代码_jquery

jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

jQuery点击自身以外地方关闭弹出层的简单实例

 本篇文章主要是对jQuery点击自身以外地方关闭弹出层的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用   开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:   HTML代码:   代码如下: <div class="down">click</div> <div class="con