右下角的弹出广告

最新推荐文章于 2023-07-24 12:32:10 发布

转载最新推荐文章于 2023-07-24 12:32:10 发布 · 133 阅读

本文介绍了一个使用HTML、CSS和jQuery实现的网页固定位置广告动画效果。该广告具有展示和隐藏的功能，并通过简单的动画效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <script src="../jquery-1.11.1.min.js"></script>
 9     <title>Document</title>
10     <style>
11         .ad{
12             width: 230px;
13             height: 120px;
14             background: url("imgs/ad.jpg");
15             position: fixed;
16             right: 0;
17             display: none;
18             bottom: 0;
19         }
20         .ad span{
21             width: 40px;
22             height: 18px;
23             background: url("imgs/h.jpg");
24             position: absolute;
25             right: 0;
26             top: 0;
27 
28         }
29     </style>
30 </head>
31 <body>
32     <div class="ad">
33         <span></span>
34     </div>
35 </body>
36 </html>
37 <script>
38    $(function(){
39     $('.ad').slideDown('slow')
40         .slideUp('normal')
41         .fadeIn(1000)
42         .children('span').click(function(){
43             $(this).parent().fadeOut();
44     })
45    })
46 </script>