jQuery实现广告弹窗

首先设置一个固定的窗口位于右下角，效果如下：

代码：

jQuery实现广告弹窗.html

之后将该窗口初始设为隐藏，通过代码实现3秒自动显示，5秒自动隐藏，其效果如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>jQuery实现广告弹窗</title>
 6         <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
 7         <style type="text/css" >
 8
 9             #ad{
10                 width: 300px;
11                 height: 300px;
12                 background-color: antiquewhite;
13                 position: fixed;
14                 bottom: 0;
15                 right: 0;
16                 display: none;
17             }
18         </style>
19         <script type="text/javascript">
20
21             setTimeout(function(){
22                 $("#ad").show();
23
24             },3000);//3秒之后就显示
25
26             setTimeout(function(){
27                 $("#ad").hide();
28
29             },5000);//5秒之后就隐藏
30
31
32     </script>
33     </head>
34     <body>
35         <div id="ad">
36             <button>关闭</button>
37
38         </div>
39
40     </body>
41 </html>

实现3秒自动显示 5秒自动隐藏.html

最后通过代码实现点击事件，最终效果如下：

实现通过代码实现点击事件核心代码：

jQuery：

$(function(){$("#closeBtn").click(function(){$("#ad").hide();});});

html:

<button id="closeBtn">关闭</button>

最终所有的代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jQuery实现广告弹窗</title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script><style type="text/css" >#ad{width: 300px;height: 300px;background-color: antiquewhite;position: fixed;bottom: 0;right: 0;display: none;}</style><script type="text/javascript">setTimeout(function(){$("#ad").show();},3000);//3秒之后就显示
            setTimeout(function(){$("#ad").hide();},5000);//5秒之后就隐藏
            $(function(){$("#closeBtn").click(function(){$("#ad").hide();});});</script></head><body><div id="ad"><button id="closeBtn">关闭</button></div></body>
</html>

jQuery实现广告弹窗.html

通过另一种方式执行点击事件来进行窗口的显示与隐藏：

另一种方式执行点击事件来进行窗口的显示与隐藏的核心代码：

 setTimeout(function(){$("#ad").toggle()},1000);$(function(){$("#closeBtn").click(function(){$("#ad").toggle();});});

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jQuery实现广告弹窗</title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script><style type="text/css" >#ad{width: 300px;height: 300px;background-color: antiquewhite;position: fixed;bottom: 0;right: 0;display: none;}</style><script type="text/javascript">//            setTimeout(function(){//                $("#ad").show();
//
//            },3000);//3秒之后就显示
//
//            setTimeout(function(){//                $("#ad").hide();
//
//            },5000);//5秒之后就隐藏
//            $(function(){//                $("#closeBtn").click(function(){//                    $("#ad").hide();
//                });
//            });
setTimeout(function(){$("#ad").toggle()},1000);$(function(){$("#closeBtn").click(function(){$("#ad").toggle();});});</script></head><body><div id="ad"><button id="closeBtn">关闭</button></div></body>
</html>

通过toggle实现弹窗.html

当然也可以实现窗口进行动画的显示：

有这样的几个参数：slow fast 毫秒数（速度）

show() //相当于 display:block

第一个参数slow fast 毫秒数（速度）
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示

参数slow的效果：

参数fast比参数slow快，效果如下：

参数毫秒数（速度）自定义例如：3秒，效果如下：

转载于:https://www.cnblogs.com/jiguiyan/p/10542779.html

jQuery实现广告弹窗相关推荐

2003服务器系统屏蔽广告,电脑总是乱弹广告弹窗？教你彻底关闭
原标题:电脑总是乱弹广告弹窗?教你彻底关闭许多小伙伴都有过这样的经历:干干净净的电脑系统还没用多久,就莫名其妙冒出些弹窗广告. 有些像推销.有些像诈骗,还有一些过分到自己都没眼看
5弹出搜索框_实用小技巧，电脑总是弹出广告，手把手教你永久关闭广告弹窗...
在使用电脑时,总是会遇到各种各样的广告弹窗.这些广告弹窗往往附属在某些实用上件,因此我们又不能卸载相应的软件.在电脑开机或者当我们正在编辑文档时,这些莫名其妙的广告弹窗很影响心情,下面教大家如何永久关 ...
原生Js_实现广告弹窗
广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
电脑怎么彻底删除软件_电脑在使用的过程中如何彻底删除今日热点广告弹窗的方法...
电脑在使用的过程中如何彻底删除今日热点广告弹窗的方法在今日热点弹窗弹出来之后,我们在键盘上同时按下"Ctrl+Alt+Del"键,调出"任务管理器",在任务管 ...
单关闭功能_广告弹窗关闭
相信现在大部分电脑都安装360安全卫士和搜狗拼音输入法,关于这两款软件各有吐槽,最讨厌的莫过于莫名奇妙的各种广告弹窗,让人不厌其烦.因为我们是免费,所以不要渴求太多. 360安全卫士广告弹窗关闭办法 ...
java如何实现广告弹窗,WPF实现消息提醒（广告弹窗）
原文:WPF实现消息提醒(广告弹窗) 1.先上效果图: 2.1t提示框界面. 主窗口界面没什么内容,就放了一个触发按钮.先绘制通知窗口(一个关闭按钮,俩个文本控件),可以设置下ResizeMode=& ...
JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: Java代码 <!DOCTYPE html> <html> <head lang=&quo ...
html弹窗_对付流氓广告弹窗：彻底告别，这一招最有效
关注我们,获取更多精品资源哦现如今,只要我们在使用电脑或者移动设备,都会有这样的瞬间:用着用着,突然之后弹出了一个广告(PS:双11快到了哦)!所以,今天小编为大家带来了一款对付流氓广告弹窗最有效的方 ...
添加弹窗_阻止电脑广告弹窗窗口让电脑桌面更清洁
在使用计算机上网过程中,经常会弹出一些广告弹窗,这些弹窗或者会干扰到我们的使用计算机的体验,有的则会对桌面内容进行一些遮挡,非常可恶. 那么我们怎么对广告弹窗进行拦截不让它们干扰我们使用计算机呢? 我 ...

jQuery实现广告弹窗

jQuery实现广告弹窗相关推荐

最新文章

热门文章