用jQuery实现弹窗小广告

最新推荐文章于 2021-11-10 15:52:46 发布

yg94web

最新推荐文章于 2021-11-10 15:52:46 发布

阅读量874

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/yg94web/article/details/109520348

版权

本文介绍了一个使用jQuery实现的带有淡入淡出效果的弹窗广告示例。该弹窗固定于页面右下角，通过简单的HTML结构配合CSS样式实现，并利用jQuery的动画效果完成展示与关闭逻辑。

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

用jQuery实现淡入淡出的弹窗小广告

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .gg{
            position: fixed;
            right: 0;
            bottom: 0;
            border-radius: 4px;
            overflow: hidden;
            display: none;
            border: 1px solid orange;
        }
        .gg>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-size: 20px;
            background-image: url(./image/叉.png);
            position: absolute;
            top: 2px;
            right: 2px;
        }
    </style>
        <script src="js/jquery.js"></script>
         <script>
              $(function (){
                  //点击叉叉消除广告
                  $(".gg>span").click(function (){
                      $(".gg").remove();
                  })
                  //复杂写法
                  // 滑出  $(".gg").slideDown(1000,function (){
                  //   淡出  $(".gg").fadeOut(1000,function (){
                  //     淡入  $(".gg").fadeIn(1000);
                  //     })
                  // })
                  //简便写法
                  $(".gg").slideDown(1000).fadeOut(1000).fadeIn(1000);
              });
         </script>
</head>
<body>
<div class="gg">
    <img src="image/5.png" width="300px" height="200px">
    <span></span>
</div>
</body>
</html>