jQuery实现广告显示和隐藏动画
更新时间：2021年07月04日 15:35:30 作者：跑起来要带风！
这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我们经常会看到几秒后出现了广告，显示了几秒后广告就消失了，下面就用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中如何使用Ajax以及通过代码详解其使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
这篇文章主要介绍了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法,结合实例形式分析了jQuery.eraser.js插件的功能、使用方法与相关注意事项,并附带eraser.js插件源码供读者下载使用,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了jQuery实现的3D版图片轮播,涉及jQuery针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
alertifyjs是一个非侵入式，可定制的JavaScript通知组件。包括可定制的对话框，和右下角消息弹出框。完全可定制的警报，确认和提示对话框、完全自定义的通知系统、回调参数处理包括“确定“和”取消“按钮的点击、允许对话框排队2015-04-04
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
这篇文章主要介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合的相关者，小编推荐使用返回list集合的方法，具体原因大家可以根据本文学习下2016-08-08
当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。2015-03-03
这篇文章主要为大家详细介绍了jquery拖拽自动排序插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下2015-02-02
有时候使用jquery 与NVelocity的时候，会产生冲突，下面是具体的解决方法，需要的朋友可以参考下。2011-06-06
jquery中的$(document).ready()与window.onload的区别
浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.2009-11-11
最新评论