需求：

我想在我论坛的页面上加一个功能，在页面上提供一个分享图标，当鼠标光标点击图标或者浮在图标上时，自动弹出一个分享二维码，我用手机微信、QQ等扫码时，就可以将这个帖子分享到微信或QQ好友，请提供一下相关JS和HTML代码。

论坛页面微信/QQ分享二维码功能实现

根据您的需求，我将为您提供一个完整的解决方案，包含HTML结构和JS代码，实现点击或悬停图标时弹出分享二维码的功能。

完整实现代码

HTML部分

html

<!-- 分享按钮容器 -->
<div class="share-container">
  <!-- 微信分享按钮 -->
  <div class="share-icon" id="wechatShareBtn">
    <img src="https://example.com/wechat-icon.png" alt="微信分享" width="32">
    <div class="qrcode-popup" id="wechatQrcode"></div>
  </div>
  
  <!-- QQ分享按钮 -->
  <div class="share-icon" id="qqShareBtn">
    <img src="https://example.com/qq-icon.png" alt="QQ分享" width="32">
    <div class="qrcode-popup" id="qqQrcode"></div>
  </div>
</div>

<!-- 分享弹窗遮罩 -->
<div id="shareModal" class="share-modal">
  <div class="modal-content">
    <span id="closeModal" class="close-modal">×</span>
    <h4>扫码分享</h4>
    <div id="modalQrcodeBox"></div>
    <p>扫码后分享到微信或QQ</p>
  </div>
</div>

CSS样式

css

/* 分享按钮基础样式 */
.share-container {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.share-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 悬停时显示的二维码弹窗 */
.qrcode-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  width: 160px;
  height: 160px;
  margin-bottom: 10px;
}

.share-icon:hover .qrcode-popup {
  visibility: visible;
  opacity: 1;
}

/* 弹窗遮罩样式 */
.share-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  position: relative;
  width: 260px;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.close-modal:hover {
  color: #333;
}

JavaScript部分

javascript

// 引入二维码生成库
document.addEventListener('DOMContentLoaded', function() {
  // 动态加载二维码库
  const script = document.createElement('script');
  script.src = 'https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';
  document.head.appendChild(script);
  
  script.onload = function() {
    // 获取当前页面URL
    const currentUrl = encodeURIComponent(window.location.href);
    const shareTitle = encodeURIComponent(document.title);
    
    // 微信分享二维码
    const wechatBtn = document.getElementById('wechatShareBtn');
    const wechatQrcode = document.getElementById('wechatQrcode');
    new QRCode(wechatQrcode, {
      text: `https://example.com/wechat-share?url=${currentUrl}&title=${shareTitle}`,
      width: 160,
      height: 160
    });
    
    // QQ分享二维码
    const qqBtn = document.getElementById('qqShareBtn');
    const qqQrcode = document.getElementById('qqQrcode');
    new QRCode(qqQrcode, {
      text: `https://example.com/qq-share?url=${currentUrl}&title=${shareTitle}`,
      width: 160,
      height: 160
    });
    
    // 点击图标显示大弹窗
    wechatBtn.addEventListener('click', function() {
      showModal(wechatQrcode.querySelector('img').src);
    });
    
    qqBtn.addEventListener('click', function() {
      showModal(qqQrcode.querySelector('img').src);
    });
    
    // 关闭弹窗
    document.getElementById('closeModal').addEventListener('click', function() {
      document.getElementById('shareModal').style.display = 'none';
    });
    
    // 点击遮罩外区域关闭弹窗
    document.getElementById('shareModal').addEventListener('click', function(e) {
      if (e.target === this) {
        this.style.display = 'none';
      }
    });
  };
  
  function showModal(qrcodeSrc) {
    const modal = document.getElementById('shareModal');
    const qrcodeBox = document.getElementById('modalQrcodeBox');
    
    qrcodeBox.innerHTML = '';
    const img = document.createElement('img');
    img.src = qrcodeSrc;
    img.width = 200;
    img.height = 200;
    qrcodeBox.appendChild(img);
    
    modal.style.display = 'flex';
  }
});