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;
            top: 20%;
            z-index: 1000;
        }
        #ad-left {
            left: 10px;
        }
        #ad-right {
            right: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="ad-left" class="floating-ad">
        <img src="left-ad.jpg" alt="Left Ad">
    </div>
    <div id="ad-right" class="floating-ad">
        <img src="right-ad.jpg" alt="Right Ad">
    </div>
    <div style="height: 2000px;">
        <!-- 页面主要内容 -->
    </div>

    <script>
        $(document).ready(function() {
            var $adLeft = $('#ad-left');
            var $adRight = $('#ad-right');

            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop();
                $adLeft.css('top', 20 + scrollTop + 'px');
                $adRight.css('top', 20 + scrollTop + 'px');
            });
        });
    </script>
</body>
</html>