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

代码:

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广告弹窗&amp;随机抽奖————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. 微信扫描下载提示以及js判断用户手机系统

            今天抽空也写一下这个教程吧,这里面涉及到就是一个APP的页面下载.公司有这个需求,让做一个页面,就是二维码扫描下载.一开始我做的版本是只能是通过浏览器来下载的,但是实际应用中,很多用户 ...

  2. [Erlang 0123] Erlang EPMD

     epmd进程和Erlang节点进程如影随形,在Rabbitmq集群,Ejabberd集群,Couchbase集群产品文档中都会有相当多的内容讲epmd,epmd是什么呢?   epmd 是Erlan ...

  3. 2015.5.2-2015.5.8 Tip jQuery ,前端组件库,inline-block元素间距等

    有忙于它事,故延迟了,但在坚持! 1.Tip jQuery   2.给span加display: inline-block; 怎样能对齐? 解决方法:vertical-align: bottom:   ...

  4. JavaScript返回上一页代码区别

    JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...

  5. 四种Sandcastle方法生成c#.net帮助类帮助文档

    方法一 前端时间在网上收集和自己平时工作总结整理了<干货,比较全面的c#.net公共帮助类>,整理完成上传github之后我又想,既然是帮助类,总得有个帮助文档于是乎想到了Sandcast ...

  6. Visio绘制用例图问题集锦

    1.Visio画UML用例图没有include关系的解决方法 发现Visio UML用例里面找不到include关系,即"箭头"+"<<include> ...

  7. ASP.NET MVC案例教程(四)

    ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...

  8. ArrayList的底层实现

    package zy809; public class myArrayList { /** 存放元素 */ private Object[] data;// 创建一个数组引用. /** 元素的个数 * ...

  9. Codeforces 487E Tourists [广义圆方树,树链剖分,线段树]

    洛谷 Codeforces 思路 首先要莫名其妙地想到圆方树. 建起圆方树后,令方点的权值是双联通分量中的最小值,那么\((u,v)\)的答案就是路径\((u,v)\)上的最小值. 然而这题还有修改, ...

  10. 【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

    2018.12.10 代办一:javascript中js怎么拷贝null的值 null属于简单类型的数值,直接进行拷贝即可: 2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办 ...