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

代码:

jQuery实现广告弹窗.html

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

 <!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秒之后就隐藏 </script>
</head>
<body>
<div id="ad">
<button>关闭</button> </div> </body>
</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秒,效果如下:

jQuery实现广告弹窗的更多相关文章

  1. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  3. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  4. JQuery实现广告效果(滚动切换)

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  5. js广告弹窗

    生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...

  6. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  7. jQuery的dialog弹窗实现

    jQuery实现dialog弹窗: html代码如下: <input type="button" onclick="performances();" va ...

  8. JQuery漂浮广告代码

    <!doctype html><html><head><meta charset="utf-8"><title>jque ...

  9. 原生Js_实现广告弹窗

    广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. 亲爱的,我是一条Linux运维技术学习路径呀。

    根据我的经验,人在年轻时,最头疼的一件事就是决定自己这一生要做什么.在这方面,我倒没有什么具体的建议:干什么都可以,但最好不要写小说,这是和我抢饭碗.总而言之,干什么都是好的:但要干出个样子来,这才是 ...

  2. Asp.net Core认证和授权:Cookie认证

    关于asp.net core 的文章,博客园已经有很多大牛写过了. 这里我只是记录下自己在学习中的点滴和一些不懂的地方 Cookie一般是用户网站授权,当用户访问需要授权(authorization) ...

  3. sqli-labs(十)(过滤注释符)

    第二十三关: 这关还是一个GET型.字符串.单引符号.的有报错的sql注入,输入?id=1'  ,页面会报错 我们继续按照之前的套路来,先输入?id=1' or '1'='1 页面正常显示,说明这个地 ...

  4. Python底层库的函数中from __future__ import absolute_import的作用

    在查看TensorFlow的底层优化器时候看到from __future__ import absolute_import 查找相关资料后发现 这个语句的意思是加入绝对引用的特征 直白的意思是,比如: ...

  5. 区别JS中类的静态方法,静态变量,实例方法,实例变量

    1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { cons ...

  6. CALL与retn

    一.CALL 例如: 004013D9      CALL 00401C4C     //ESP = 0060F9C8 004013DE 相当于 sub esp,0x4; //ESP = 0060F9 ...

  7. 斯坦福大学自然语言处理第四课“语言模型(Language Modeling)”

    http://52opencourse.com/111/斯坦福大学自然语言处理第四课-语言模型(language-modeling) 一.课程介绍 斯坦福大学于2012年3月在Coursera启动了在 ...

  8. sitecore系统教程之架构概述

    Sitecore体验数据库(xDB)从实时大数据存储库中的所有通道源收集所有客户交互.它连接交互数据,为每个客户创建全面,统一的视图,并使营销人员可以使用数据来管理客户的实时体验. xDB架构非常灵活 ...

  9. Running tests on PyCharm using Robot Framework

    问题: I started using PyCharm with the robot framework, but i'm facing an issue. how can i run my test ...

  10. Python -- print(dataframe)时,省略部分列。

    import pandas as pd # 导入后加入以下列,再显示时显示完全. pd.set_option('display.max_rows',500) pd.set_option('displa ...