简易在线浮动客服-网站右侧悬停浮动在线客服代码

本文将介绍如何制作一个简单的在线浮动客服，这是一个网站右侧悬浮窗的在线客服，并分享完整的代码实现。

CSS

    /* 基础样式重置 */
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 固定小部件位置 */
    .fixed-widget {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
    }

    /* 小部件项目样式 */
    .widget-item {
      width: 48px;
      height: 48px;
      background-color: #f0f0f0;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 6px;
      position: relative;
      transition: background-color 0.3s;
	  right: 8px;
    }

    .widget-item:hover {
      background-color: #e0e0e0;
    }

    /* 图标样式 */
    .widget-icon {
      color: #666;
      font-size: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* 服务信息框样式 */
    .service-box {
      display: none;
      position: absolute;
      width: 180px;
      height: auto;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      top: 0;
      right: 50px;
      border: 1px solid #e0e0e0;
    }

    .service-box p {
      margin: 0;
      font-size: 14px;
    }

    /* 微信二维码样式 */
    .wechat-qr {
      width: 100%;
      height: auto;
      margin-bottom: 4px;
    }

    /* 返回顶部按钮样式 */
    .scroll-top {
      display: block;
    }

    /* 媒体查询，小于768px时显示返回顶部按钮 */
    @media (max-width: 768px) {
      .scroll-top {
        display: block;
      }
    }

HTML

<div class="fixed-widget">
    <div class="flex flex-col space-y-2">
      <!-- 电话 -->
      <div class="widget-item" onmouseover="showService('phone-service')" onmouseout="hideService('phone-service')">
        <span class="widget-icon">📞</span>
        <div class="service-box" id="phone-service">
          <p>📞 +86 123-4567-8910</p>
        </div>
      </div>

      <!-- 邮箱 -->
      <div class="widget-item" onmouseover="showService('email-service')" onmouseout="hideService('email-service')">
        <span class="widget-icon">✉️</span>
        <div class="service-box" id="email-service">
          <p>✉️ 12345678@qq.com</p>
        </div>
      </div>

      <!-- 微信 -->
      <div class="widget-item" onmouseover="showService('wechat-service')" onmouseout="hideService('wechat-service')">
        <span class="widget-icon">📱</span>
        <div class="service-box" id="wechat-service">
          <img src="WeChat.jpg" alt="WeChat" class="wechat-qr">
        </div>
      </div>

      <!-- 返回顶部 -->
      <div class="widget-item scroll-top" onclick="scrollToTop()">
        <span class="widget-icon">🔝</span>
      </div>
    </div>
  </div>

Javascript

  <script>
    // 显示服务信息
    function showService(id) {
      document.getElementById(id).style.display = 'block';
    }

    // 隐藏服务信息
    function hideService(id) {
      document.getElementById(id).style.display = 'none';
    }

    // 滚动到页面顶部
    function scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  </script>

效果图：