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

代码：

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. maven 详解二

    转自 http://www.cnblogs.com/whgk/p/7121336.html 前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ss ...

  2. c# 判断文件是否发生了变化

    你这个是想文件发生改变时,自动调用一个函数,做出一些操作呢. 还是有一个按钮(或者别的什么),你去点击一下,然后检测下一个文件,是否发生了变化? 下面的代码,监控d盘下的所有.txt文件的修改 1 2 ...

  3. leetcode 198打家劫舍

    讲解视频见刘宇波leetcode动态规划第三个视频 记忆化搜索代码: #include <bits/stdc++.h> using namespace std; class Solutio ...

  4. Python实现selenium回放时间设置

    一般在做selenium时会有,回放快慢的需求. 实现思路: 1.一般写selenium会自定义findelement函数,来实现查找元素. 2.在查找函数上加个睡眠时间的装饰器,函数执行完等待若干秒 ...

  5. 41.SEO----前端SEO技巧

    一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果.深究其背后的故事,搜索引擎做了很多事情. 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关 ...

  6. rsa 加密 pkcs#1格式秘钥的格式化

    C++调用openssl库生成的秘钥对,通过传输传出来的只有秘钥的内容,没有秘钥的格式.而我们在调用openssl库加密解密时,传入的秘钥是需要包含格式的.C++调用openssl库需要的格式为pkc ...

  7. python文件基础IO,OS

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os # 导入 Phone 包 #File 对象方法: file对象提供了操作文件的一系列方法. #O ...

  8. jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件

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

  9. shell文件的编写

    见文章http://www.cnblogs.com/handsomecui/p/5869361.html

  10. Python2.6 升级2.7

    一. Centos6 默认为python2.6且不可卸载(因为Centos6深度依赖Python),要想升级为2.7 只能通过全新升级 操作如下: 1.下载 Python2.7 网址 https:// ...