jquery 多个漂浮广告

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。漂浮广告（Floating Ads）是一种在网页上浮动的广告，通常会跟随用户的滚动条移动。

类型

固定位置漂浮广告：广告始终固定在页面的某个位置，不会随滚动条移动。
跟随滚动条漂浮广告：广告会跟随用户的滚动条移动，始终保持在屏幕的某个位置。

应用场景

漂浮广告常用于网站、博客、电商网站等，用于吸引用户的注意力，推广产品或服务。

示例代码

以下是一个简单的 jQuery 漂浮广告示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Ads with jQuery</title>
    <style>
        #floating-ad {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 2px 2px 5px #aaa;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="floating-ad">
        <h3>Special Offer!</h3>
        <p>Don't miss our limited time deals!</p>
    </div>

    <script>
        $(document).ready(function() {
            var $ad = $('#floating-ad');
            var adHeight = $ad.outerHeight();
            var adWidth = $ad.outerWidth();
            var initialTop = 10;
            var initialRight = $(window).width() - adWidth - 10;

            $ad.css({
                top: initialTop,
                right: initialRight
            });

            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop();
                var scrollLeft = $(this).scrollLeft();
                var newTop = scrollTop + initialTop;
                var newRight = $(window).width() - adWidth - 10;

                $ad.css({
                    top: newTop,
                    right: newRight
                });
            });

            $(window).resize(function() {
                var newRight = $(window).width() - adWidth - 10;
                $ad.css({
                    right: newRight
                });
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

广告闪烁或跳动：
- 原因：可能是由于广告的位置计算不准确或浏览器重绘导致的。
- 解决方法：确保广告的位置计算在滚动和窗口调整大小事件中正确执行，可以使用 requestAnimationFrame 来优化动画效果。

广告超出屏幕边界：
- 原因：广告的位置没有正确限制在屏幕边界内。
- 解决方法：在计算广告位置时，确保广告不会超出屏幕的上下左右边界。
广告在某些浏览器上不显示：
- 原因：可能是由于浏览器兼容性问题或 jQuery 版本不兼容。
- 解决方法：确保使用的 jQuery 版本是最新的，并且测试广告在不同浏览器上的显示效果。

通过以上方法，可以有效地创建和管理漂浮广告，提升用户体验和广告效果。