温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用jQuery代码实现广告显示和隐藏动画

发布时间:2022-10-21 17:33:23 来源:亿速云 阅读:229 作者:iii 栏目:web开发

这篇“怎么使用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" >         <img  src="../img/adv.jpg" />     </div>     <!-- 下方正文部分 -->     <div id="content">         正文部分     </div> </div> </body> </html>

以上就是关于“怎么使用jQuery代码实现广告显示和隐藏动画”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI