QQ 在線客服浮動代碼實現：HTML+CSS+JavaScript 完整示例

在網頁右側固定位置顯示浮動 QQ 客服面板，隨頁面滾動自動跟隨，支持多客服在線/離線狀態切換。以下是完整實現代碼，可直接嵌入頁面或作為組件引用。

一、完整代碼結構

<!-- 1. 引入樣式 -->
<link rel="stylesheet" href="images/qq.css" type="text/css" />

<!-- 2. 浮動層容器（雙重寫法兼容舊瀏覽器） -->
<script>
    if (!document.layers) {
        document.write('<div id="divStayTopLeft" style="position:absolute">');
    }
</script>
<layer name="divStayTopLeft" left="880" top="1055" id="divStayTopLeft">

<!-- 3. 面板主體表格 -->
<table border="0" width="110" cellspacing="0" cellpadding="0">
    <tr>
        <td width="110"><img src="QQ/kefu_up.gif" width="110" height="70" border="0" /></td>
    </tr>

    <!-- 客服 1 -->
    <tr>
        <td valign="middle" background="QQ/kefu_middle.gif">
            <script>
                if (online[0] == 0) {
                    document.write("&nbsp;&nbsp;<img src='QQ/QQoffline.gif' border='0' align='middle'><a class='qqb' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=0000000&Site=在線咨詢&Menu=no' title='不在線,請留言'> 客戶服務</a>");
                } else {
                    document.write("&nbsp;&nbsp;<img src='QQ/QQonline.gif' border='0' align='middle'><a class='qqa' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=0000000&Site=在線咨詢&Menu=no' title='在線即時交談'> 客戶服務</a>");
                }
            </script>
        </td>
    </tr>

    <!-- 客服 2 -->
    <tr>
        <td valign="middle" background="QQ/kefu_middle.gif">
            <script>
                if (online[1] == 0) {
                    document.write("&nbsp;&nbsp;<img src='QQ/QQoffline.gif' border='0' align='middle'><a class='qqb' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=000000&Site=在線咨詢&Menu=no' title='不在線,請留言'> 站務咨詢</a>");
                } else {
                    document.write("&nbsp;&nbsp;<img src='QQ/QQonline.gif' border='0' align='middle'><a class='qqa' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=000000&Site=在線咨詢&Menu=no' title='在線即時交談'> 站務咨詢</a>");
                }
            </script>
        </td>
    </tr>

    <!-- 客服 3 -->
    <tr>
        <td valign="middle" background="QQ/kefu_middle.gif">
            <script>
                if (online[2] == 0) {
                    document.write("&nbsp;&nbsp;<img src='QQ/QQoffline.gif' border='0' align='middle'><a class='qqb' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=000000&Site=在線咨詢&Menu=no' title='不在線,請留言'> 本站站長</a>");
                } else {
                    document.write("&nbsp;&nbsp;<img src='https://www.jinanwangzhanjianshe.com/QQ/QQonline.gif' border='0' align='middle'><a class='qqa' target='_blank' href='https://wpa.qq.com/msgrd?V=1&Uin=000000&Site=在線咨詢&Menu=no' title='在線即時交談'> 本站站長</a>");
                }
            </script>
        </td>
    </tr>

    <tr>
        <td width="110"><img src="QQ/kefu_down.gif" width="110" height="31" border="0" /></td>
    </tr>
</table>
</layer>

<script>
    if (!document.layers) document.write('</div>');
</script>

<!-- 4. 浮動定位核心腳本 -->
<script type="text/javascript">
    var verticalpos = "frombottom"; // "fromtop" 或 "frombottom"
    
    function JSFX_FloatTopDiv() {
        var startX = 3, startY = 250;
        var ns = (navigator.appName.indexOf("Netscape") != -1);
        var d = document;
        
        function ml(id) {
            var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            if (d.layers) el.style = el;
            el.sP = function(x, y) { this.style.left = x; this.style.top = y; };
            el.x = startX;
            if (verticalpos == "fromtop") {
                el.y = startY;
            } else {
                el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                el.y -= startY;
            }
            return el;
        }
        
        window.stayTopLeft = function() {
            var pY;
            if (verticalpos == "fromtop") {
                pY = ns ? pageYOffset : document.body.scrollTop;
                ftlObj.y += (pY + startY - ftlObj.y) / 8;
            } else {
                pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                ftlObj.y += (pY - startY - ftlObj.y) / 8;
            }
            ftlObj.sP(ftlObj.x, ftlObj.y);
            setTimeout("stayTopLeft()", 10);
        }
        
        ftlObj = ml("divStayTopLeft");
        stayTopLeft();
    }
    
    JSFX_FloatTopDiv();
</script>

二、關鍵點解析

1. 在線狀態數組：var online = new Array(); 需在頁面加載前由後端或 JS 動態賦值（如 online[0]=1 表示第一個客服在線）。
2. QQ 鏈接格式：https://wpa.qq.com/msgrd?V=1&Uin=QQ號&Site=站點名&Menu=no，點擊直接啟動 QQ 臨時會話。
3. 浮動算法：使用緩動公式 current += (target - current) / 8 實現平滑跟隨，setTimeout(..., 10) 形成動畫循環。
4. 兼容性處理：同時使用 <div>（現代瀏覽器）和 <layer>（Netscape 4），並通過 document.layers 判斷分支。
5. 垂直定位模式：verticalpos="frombottom" 使面板相對視窗底部固定，適合長頁面；改為 "fromtop" 則相對頂部。

三、部署步驟

1. 準備圖片資源：kefu_up.gif, kefu_middle.gif, kefu_down.gif, QQonline.gif, QQoffline.gif 放入 QQ/ 目錄。
2. 創建 qq.css 定義 .qqa（在線樣式）、.qqb（離線樣式）等類。
3. 將上述代碼放入頁面 <body> 末尾或公共模板中。
4. 在頁面加載前初始化 online 數組（可通過 AJAX 輪詢後端獲取實時狀態）。

四、現代化改造建議

• 使用 position: fixed; right: 0; top: 50%; transform: translateY(-50%); 替代 JS 浮動，性能更優、無抖動。
• 用 Vue/React 組件化管理狀態，通過 WebSocket 推送在線狀態變更。
• 圖標改用 SVG/IconFont，減少圖片請求。
• QQ 鏈接改用 tencent://message/?uin=... 協議或官方 SDK，體驗更佳。

此代碼雖屬經典實現，理解其原理有助於掌握浮動定位、跨瀏覽器兼容與第三方通訊集成的核心邏輯。