案例广告自动显示与隐藏

最新推荐文章于 2024-08-14 09:04:24 发布

diaopitian0181

最新推荐文章于 2024-08-14 09:04:24 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mozq/p/10877357.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>广告的自动显示与隐藏</title>
 6     <style>
 7         #content{width:100%;height:500px;background:#999}
 8     </style>
 9 
10     <!--引入jquery-->
11     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
12     <script>
13         /*
14             页面加载，3秒后显示图片，显示5秒后隐藏图片。
15          */
16         $(function () {
17             setTimeout(function () {
18                 //显示图片
19                 $("#ad").slideDown(200, "linear");
20                 //显示5s，之后隐藏图片
21                 setTimeout(function () {
22                     //隐藏图片
23                     $("#ad").slideUp(200, "swing");
24                 }, 5000);
25             }, 3000);
26         })
27     </script>
28 </head>
29 <body>
30 <!-- 整体的DIV -->
31 <div>
32     <!-- 广告DIV -->
33     <div id="ad" style="display: none;">
34         <img style="width:100%" src="../img/heima.png" />
35     </div>
36 
37     <!-- 下方正文部分 -->
38     <div id="content">
39         正文部分
40     </div>
41 </div>
42 </body>
43 </html>

广告自动显示与隐藏

转载于:https://www.cnblogs.com/mozq/p/10877357.html

diaopitian0181

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例广告自动显示与隐藏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>广告的自动显示与隐藏</title> 6 <style> 7 #content{width:...
复制链接

扫一扫