如何利用纯代码实现侧边栏加入交流展示二维码扫码功能？-FUNION数字营销

大家好，我是FUNION数字营销实战派飞小优，最近在新项目中遇到一个小需求，雇主需要在网站侧边栏添加免费交流弹出二维码扫码功能，不能用插件实现，想了想就直接用纯代码实现，具体采用HTML+JS来实现该功能，具体看步骤。

代码demo示例

Html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跨境物流交流群</title>
</head>
<body>

<div class="item-container">
    <!-- 重复的 .item-box 结构 -->
    <!-- ... -->
</div>

</body>
</html>

Css代码

<style>
        .item-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .item-box {
            display: flex;
            align-items: center;
            padding: 12px 0;
            position: relative; 
            overflow: visible;
            justify-content: space-between;
            cursor: pointer;
        }

        .left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon {
            width: 30px;
            height: 30px;
        }

        .right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .join-us-btn {
            padding: 8px 16px;
            background-color: #FFC514;
            color: #fff;
            border: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .join-us-btn:hover {
            background-color: #ff8000;
        }

        .qrcode {
            width: 120px;
            height: 120px;
            visibility: hidden; 
            opacity: 0;
            transition: visibility 0s, opacity 0.3s ease;
            position: absolute;
            top: 50%;
            right: 20px; /* 调整为固定像素值 */
            transform: translateY(-50%);
            z-index: 10; 
            background-color: #fff; 
            padding: 10px; 
            box-sizing: border-box;
            border: 1px solid #ddd; 
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
     
        .item.show-qrcode .qrcode {
            visibility: visible;
            opacity: 1;
        }
    </style>

JS代码

<script>
document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.item-box');

    items.forEach(item => {
        item.addEventListener('mouseenter', () => {
            item.classList.add('show-qrcode');
        });
        item.addEventListener('mouseleave', () => {
            item.classList.remove('show-qrcode');
        });
    });
});
</script>

将以上代码全部复制到指定的页面中然后进行调试，这是笔者测试后可以直接使用的代码，若有css样式错乱问题则可以自行调试，以下是我的前端显示效果。