jQuery实现广告显示和隐藏动画


Posted in jQuery onJuly 04, 2021

我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            需求:
                1. 当页面加载完,3秒后。自动显示广告
                2. 广告显示5秒后,自动消失。

            分析:
                1. 使用定时器来完成。setTimeout (执行一次定时器)
                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
                3. 使用  show/hide方法来完成广告的显示
         */
        //入口函数,在页面加载完成之后,定义定时器,调用这两个方法
        $(function () {
            //定义定时器,调用adShow方法 3秒后执行一次
            setTimeout(adShow,3000);
            //定义定时器,调用adHide方法,8秒后执行一次
            setTimeout(adHide,8000);
        });
        //显示广告
        function adShow() {
            //获取广告div,调用显示方法
            $("#ad").show("slow");
        }
        //隐藏广告
        function adHide() {
            //获取广告div,调用隐藏方法
            $("#ad").hide("slow");
        }
    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

目录结构:

jQuery实现广告显示和隐藏动画

运行结果:

一开始进入的时候,广告没有显示

jQuery实现广告显示和隐藏动画

三秒后,广告出现

jQuery实现广告显示和隐藏动画

广告显示五秒后,消失

jQuery实现广告显示和隐藏动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 #jQuery
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
You might like
php中异常处理方法小结
2015/01/09 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python deque模块简单使用代码实例
2020/03/12 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
《水乡歌》教学反思
2014/04/24 职场文书
毕业生党员个人总结
2015/02/14 职场文书
团支部书记竞选稿
2015/11/21 职场文书