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和ajax代替iframe的方法(详解)
Apr 12 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python里大整数相乘相关技巧指南
2014/09/12 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python递归下载文件夹下所有文件
2019/08/31 Python
基于python的列表list和集合set操作
2019/11/24 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
校园招聘策划书
2014/01/09 职场文书
植树造林的宣传标语
2014/06/23 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
道德模范事迹材料
2014/12/20 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Python利用FlashText算法实现替换字符串
2022/03/31 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL