jQuery广告弹窗实战 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6     <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
 7     <style type="text/css">
 8         #ad{
 9             width: 300px;
10             height: 300px;
11             background-color: aquamarine;
12             position: fixed;
13             bottom: 0;
14             right: 0;
15         }
16     </style>
17     <script type="text/javascript">
18         // setTimeout(function () {
19         //     $("#ad").show("1000",function () {   //show：显示 display:block
20         //         console.log("广告动画显示完成")
21         //     });
22         // },3000);   //slow慢 fast快 1000，均可添加回调函数
23         // setTimeout(function () {
24         //     $("#ad").hide("1000",function () {   //hide：隐藏 display:none
25         //         console.log("广告已关闭")
26         //     });
27         // },5000);   //slow慢 fast快 1000，均可添加回调函数
28         // $(function(){
29         //     $("#closeBtn").click(function () {
30         //         $("#ad").hide();
31         //     });
32         // });
33 
34         setTimeout(function () {
35             // $("#ad").toggle("slow");
36             // $("#ad").slideDown(2000);  //从屏幕下往上滑入
37             // $("#ad").slideToggle(2000);
38             // $("#ad").fadeIn(1000);    //从屏幕中渐渐出现（透明度0-100%）
39             // $("#ad").fadeToggle(1000);
40             $("#ad").fadeTo(1000,0.5);   //1S内透明度从0到0.5
41         },1000);
42         $(function () {
43             $("#closeBtn").click(function () {
44                 // $("#ad").toggle("slow");
45                 // $("#ad").slideUp(2000);   //从屏幕往下滑出
46                 // $("#ad").slideToggle(2000);
47                 // $("#ad").fadeOut(1000);   //从屏幕中慢慢消失（透明度100%-0）
48                 // $("#ad").fadeToggle(1000);
49                 $("#ad").fadeTo(1000,0);
50             })
51         })     //toggle相当于开关，当广告不显示时调用后显示广告，当广告显示时调用会关闭广告
52 
53     </script>
54 </head>
55 <body>
56     <div id="ad" style="display: none">
57         <button id="closeBtn">关闭</button>
58     </div>
59 </body>
60 </html>

 

posted @ 2020-03-28 14:19  组装梦想  阅读(293)  评论(0)    收藏  举报