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

代码:

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. PLSQL的SQL%NOTFOUND的使用场景

    SELECT * INTO v_ticketStorageRow FROM BDM_TICKET_STORAGE WHERE p_startTicketNo >= START_NO_ AND p ...

  2. shell的函数返回值

    1.默认function的返回值包含0 和1,执行成功,返回0,执行失败,返回1,可以采用$?来获取执行结果 2.函数如何返回字符串呢,可以采用echo函数 #!/bin/bashfunction t ...

  3. iOS库

    https://medium.com/app-coder-io/33-ios-open-source-libraries-that-will-dominate-2017-4762cf3ce449#.i ...

  4. ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeeper create failed after 4 attempts

    ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeeper create failed after 4 attempts ERROR [main] m ...

  5. IntelliJ Idea Java 使用

    IntelliJ Idea热加载 自动更新 IntelliJ IDEA热加载自动更新(Update classes and resources ) IntelliJ IDEA默认文件是自动保存的,但是 ...

  6. Selenium基础知识(三)元素判断

    一.由于有些页面加载完后,某些元素还没有加载,这样就会导致异常,脚本稳定性变差 为了解决这个问题,selenium提供了WebDriverWait以及implicitly_wait()等待 WebDr ...

  7. Python学习笔记之装饰器原理

    def decorator(fn): def wrapper(): print("询价") fn() print("购买成功!") return wrapper ...

  8. c#之课后习题

    1.折叠代码 #region 折叠内容#endregion 2.保留三位小数 using System; namespace _005_double保留3位小数 { class Program { s ...

  9. ubuntu安装启动redis

    1.下载安装 sudo apt-get  install  build-essential wget http://redis.googlecode.com/files/redis-2.2.13.ta ...

  10. html5-超级链接

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...