【JavaWeb】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的显示和隐藏动画效果其实就是控制display3. 使用  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>

目录结构：

运行结果：

一开始进入的时候，广告没有显示
三秒后，广告出现
广告显示五秒后，消失

【JavaWeb】JQuery实现广告显示和隐藏动画效果相关推荐

AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果思路: →npm install angular-anima ...
android view控件的显示和隐藏动画效果
// 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
html 点击隐藏特效代码,vueJS简单的点击显示与隐藏的效果(实现代码)
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果[实现代码].小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧目前前端框架太多,接触过angular.ember,现在开始倒腾vu ...
html自定义动画让元素下落,jQuery实现的模仿雨滴下落动画效果
本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: ...
小程序制作自定义弹层添加弹层显示和隐藏动画父组件与子组件（自定义组件）之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组 ...
【jQuery/CSS】显示或隐藏元素
1. CSS分别有display.visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择,默认值为inline,隐藏后会释放元素所占用的页面空间(详见 ...
Jquery 同个类名中点击的显示其他隐藏的效果
页面的DOM结构如下: <tr>......<td><a href="javascript:void(0)" class="c_detail ...

【JavaWeb】JQuery实现广告显示和隐藏动画效果

【JavaWeb】JQuery实现广告显示和隐藏动画效果相关推荐

最新文章

热门文章