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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现雪花飘落效果
Aug 02 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
用python实现名片管理系统
2020/06/18 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
中科软测试工程师面试题
2012/06/16 面试题
大学团日活动新闻稿
2014/09/10 职场文书
个人作风建设总结
2014/10/23 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
冰雪公主观后感
2015/06/16 职场文书
返乡农民工证明
2015/06/24 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
python自动化八大定位元素讲解
2021/07/09 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL