jquery悬浮广告

基础概念

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;
            height: 100px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="floating-ad">
        <p>这是一个悬浮广告</p>
        <button onclick="closeAd()">关闭</button>
    </div>

    <script>
        $(document).ready(function() {
            // 确保广告不会超出屏幕边界
            function adjustPosition() {
                var ad = $('#floating-ad');
                var windowHeight = $(window).height();
                var adHeight = ad.outerHeight();
                if (ad.offset().top + adHeight > windowHeight) {
                    ad.css('bottom', 'auto').css('top', windowHeight - adHeight - 20 + 'px');
                } else {
                    ad.css('top', 'auto').css('bottom', '20px');
                }
            }

            // 初始化位置
            adjustPosition();

            // 监听窗口滚动事件
            $(window).scroll(function() {
                adjustPosition();
            });

            // 监听窗口大小变化事件
            $(window).resize(function() {
                adjustPosition();
            });
        });

        function closeAd() {
            $('#floating-ad').remove();
        }
    </script>
</body>
</html>