jquery右侧悬浮二维码

基础概念

jQuery右侧悬浮二维码是一种网页设计技术，通过在网页的右侧悬浮显示一个二维码，用户可以方便地扫描该二维码进行各种操作，如关注微信公众号、下载APP等。

类型

固定悬浮：二维码始终固定在页面右侧，不随页面滚动而移动。
跟随悬浮：二维码跟随鼠标移动，始终保持在屏幕的某个位置。

应用场景

微信公众号推广：用户扫描二维码关注公众号。
APP下载：用户扫描二维码下载APP。
在线客服：用户扫描二维码直接进入在线客服系统。

实现方法

以下是一个简单的示例代码，展示如何使用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-qr {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 150px;
            height: 150px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div id="floating-qr">
        <img src="path/to/your/qrcode.png" alt="二维码">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化悬浮二维码
            var $floatingQr = $('#floating-qr');

            // 确保二维码不会超出屏幕边界
            function adjustPosition() {
                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                var qrWidth = $floatingQr.outerWidth();
                var qrHeight = $floatingQr.outerHeight();

                if (qrWidth + 20 > windowWidth) {
                    $floatingQr.css('right', 'auto');
                    $floatingQr.css('left', (windowWidth - qrWidth - 20) + 'px');
                } else {
                    $floatingQr.css('right', '20px');
                    $floatingQr.css('left', 'auto');
                }

                if (qrHeight + 20 > windowHeight) {
                    $floatingQr.css('bottom', 'auto');
                    $floatingQr.css('top', (windowHeight - qrHeight - 20) + 'px');
                } else {
                    $floatingQr.css('bottom', '20px');
                    $floatingQir.css('top', 'auto');
                }
            }

            // 调整初始位置
            adjustPosition();

            // 监听窗口大小变化，重新调整位置
            $(window).resize(function() {
                adjustPosition();
            });
        });
    </script>
</body>
</html>