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实现的手风琴侧边菜单效果
Mar 29 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
详解jquery选择器的原理
Aug 01 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery treeview树形结构应用
Mar 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
解决GD中文乱码问题
2007/02/14 PHP
php中变量及部分适用方法
2008/03/27 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
UCenter Home二次开发指南
2009/05/28 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python中List.count()方法的使用教程
2015/05/20 Python
解决DataFrame排序sort的问题
2018/06/07 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
《湘夫人》教学反思
2014/02/21 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
社区文化建设方案
2014/05/02 职场文书
护理专业自荐书
2014/06/04 职场文书
525心理活动总结
2014/07/04 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
领导工作表现评语
2015/01/04 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
vue实现简单数据双向绑定
2021/04/28 Vue.js