jquery 漂浮广告带关闭

基础概念

jQuery漂浮广告是一种网页上的浮动元素，通常用于展示广告内容。这些广告会随着用户滚动页面而移动，并且通常包含一个关闭按钮，允许用户将其隐藏。

类型

固定位置：广告始终固定在页面的某个位置，如右下角。
跟随滚动：广告会随着页面滚动而移动，保持在屏幕的某个固定位置。
弹出式：广告会在用户触发某个事件时弹出，如点击按钮。

应用场景

网站推广：用于宣传新产品或服务。
品牌展示：用于提升品牌知名度。
活动通知：用于通知用户即将到来的促销活动。

示例代码

以下是一个简单的jQuery漂浮广告示例，包含关闭按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 漂浮广告</title>
    <style>
        #floating-ad {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 200px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #close-btn {
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="floating-ad">
        <span id="close-btn">X</span>
        <p>这是一个漂浮广告！</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#close-btn').click(function() {
                $('#floating-ad').hide();
            });
        });
    </script>
</body>
</html>