在線QQ懸浮插件

http://vipshow.iteye.com/blog/1861281

http://jingyan.baidu.com/article/6181c3e0482621152ef153da.html

最近做網站需要在線QQ懸浮功能，且QQ是通過從數據庫獲取的集合。

下面例子爲靜態的QQ list集合。在此感謝 zhaizhai1988 的分享，對原文我做了相應的調整，代碼看起來更整齊，而且我上傳整個例子，供有需要的朋友下載，下載後直接就可以預覽效果。

①js工具類 qqOnline.js

/**
*
*  qqOnline - Sonline
*  author:selina
*
**/
(function($) {
    $.fn.Sonline = function(options) {
        var opts = $.extend({}, $.fn.Sonline.defualts, options);
        $.fn.setList(opts); // 調用列表設置
        if (opts.DefaultsOpen == false) {
            $.fn.Sonline.close(opts.Position, 0);
        }
        // 展開
        $("#SonlineBox > .openTrigger").live("click", function() {
            $.fn.Sonline.open(opts.Position);
        });
        // 關閉
        $("#SonlineBox > .contentBox > .closeTrigger").live("click",
                function() {
                    $.fn.Sonline.close(opts.Position, "fast");
                });
        // Ie6兼容或滾動方式顯示
        if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style
                || opts.Effect == true) {
            $.fn.Sonline.scrollType();
        } else if (opts.Effect == false) {
            $("#SonlineBox").css({
                position : "fixed"
            });
        }
    }
    // plugin defaults
    $.fn.Sonline.defualts = {
        Position : "left",// left或right
        Top : 200,// 頂部距離，默認200px
        Effect : true, // 滾動或者固定兩種方式，布爾值：true或
        DefaultsOpen : true, // 默認展開：true,默認收縮：false
        Qqlist : "" // 多個QQ用','隔開，QQ和客服名用'|'隔開
    }
    // 展開
    $.fn.Sonline.open = function(positionType) {
        var widthValue = $("#SonlineBox > .contentBox").width();
        if (positionType == "left") {
            $("#SonlineBox > .contentBox").animate({
                left : 0
            }, "fast");
        } else if (positionType == "right") {
            $("#SonlineBox > .contentBox").animate({
                right : 0
            }, "fast");
        }
        $("#SonlineBox").css({
            width : widthValue + 4
        });
        $("#SonlineBox > .openTrigger").hide();
    }
    // 關閉
    $.fn.Sonline.close = function(positionType, speed) {
        $("#SonlineBox > .openTrigger").show();
        var widthValue = $("#SonlineBox > .openTrigger").width();
        var allWidth = (-($("#SonlineBox > .contentBox").width()) - 6);
        if (positionType == "left") {
            $("#SonlineBox > .contentBox").animate({
                left : allWidth
            }, speed);
        } else if (positionType == "right") {
            $("#SonlineBox > .contentBox").animate({
                right : allWidth
            }, speed);
        }
        $("#SonlineBox").animate({
            width : widthValue
        }, speed);
    }
    // 子插件：設置列表參數
    $.fn.setList = function(opts) {
        $("body")
                .append(
                        "<div class='SonlineBox' id='SonlineBox' style='top:-600px;'><div class='openTrigger' style='display:none' title='展開'></div><div class='contentBox'><div class='closeTrigger'><img src='icon-open.png' title='關閉' /></div><div class='titleBox'><span>客服中心</span></div><div class='listBox'></div></div></div>");
        if (opts.Qqlist == "") {
            $("#SonlineBox > .contentBox > .listBox").append(
                    "<p style='padding:15px'>暫無在線客服。</p>")
        } else {
            var qqListHtml = $.fn.Sonline.splitStr(opts);
            $("#SonlineBox > .contentBox > .listBox").append(qqListHtml);
        }
        if (opts.Position == "left") {
            $("#SonlineBox").css({
                left : 0
            });
        } else if (opts.Position == "right") {
            $("#SonlineBox").css({
                right : 0
            })
        }
        $("#SonlineBox").css({
            top : opts.Top
        });
        var allHeights = 0;
        if ($("#SonlineBox > .contentBox").height() < $(
                "#SonlineBox > .openTrigger").height()) {
            allHeights = $("#SonlineBox > .openTrigger").height() + 4;
        } else {
            allHeights = $("#SonlineBox > .contentBox").height() + 4;
        }
        $("#SonlineBox").height(allHeights);
        if (opts.Position == "left") {
            $("#SonlineBox > .openTrigger").css({
                left : 0
            });
        } else if (opts.Position == "right") {
            $("#SonlineBox > .openTrigger").css({
                right : 0
            });
        }
    }
    // 滑動式效果
    $.fn.Sonline.scrollType = function() {
        $("#SonlineBox").css({
            position : "absolute"
        });
        var topNum = parseInt($("#SonlineBox").css("top") + "");
        $(window).scroll(function() {
            var scrollTopNum = $(window).scrollTop();// 獲取網頁被捲去的高
            $("#SonlineBox").stop(true, true).delay(0).animate({
                top : scrollTopNum + topNum
            }, "slow");
        });
    }
    // 分割QQ
    $.fn.Sonline.splitStr = function(opts) {
        var strs = new Array(); // 定義一數組
        var QqlistText = opts.Qqlist;
        strs = QqlistText.split(","); // 字符分割
        var QqHtml = ""
        for ( var i = 0; i < strs.length; i++) {
            var subStrs = new Array(); // 定義一數組
            var subQqlist = strs[i];
            subStrs = subQqlist.split("|"); // 字符分割
            QqHtml = QqHtml
                    + "<div class='QQList'><span>"
                    + subStrs[1]
                    + "：</span><a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="
                    + subStrs[0]
                    + "&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"
                    + subStrs[0]
                    + ":41 &amp;r=0.22914223582483828' alt='點擊這裏'></a></div>"
        }
        return QqHtml;
    }
})(jQuery);

 

②css樣式 qqOnline.css

.SonlineBox{ width:162px; font-size:12px;overflow:hidden; z-index:9999;}
.SonlineBox .openTrigger{ width:30px; height:110px; position:absolute; top:0px;  z-index:1; cursor:pointer;  background:#0176ba url(icon-close.png) no-repeat;}
.SonlineBox .titleBox{ width:158px; height:35px; line-height:35px; background:#038bdc url(icon-bg.png) repeat-x; border-bottom:2px solid #0176ba;}
.SonlineBox .titleBox span{ margin-left:10px; color:#fff; font-size:14px; font-family:'微軟雅黑','黑體';}
.SonlineBox .contentBox{ width:158px; height:auto; border:2px solid #0176ba; background:#fff; position:absolute; z-index:2;}
.SonlineBox .contentBox .closeTrigger{ width:25px; height:25px; display:block; cursor:pointer;  position:absolute; top:5px;right:5px;-webkit-transition:all 0.8s ease-out;}
.SonlineBox .contentBox .closeTrigger:hover{-webkit-transform:scale(1) rotate(360deg);}
.SonlineBox .contentBox .listBox{overflow:hidden; margin-bottom:10px;}
.SonlineBox .contentBox .listBox .QQList{ display:block; width:86%; height:22px; margin:10px auto 0px auto;}
.SonlineBox .contentBox .listBox .QQList span{float:left; line-height:22px;}
.SonlineBox .contentBox .listBox .QQList a{float:left;}

 ③ html頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在線QQ客服懸浮插件</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<link href="qqOnline.css" rel="stylesheet" type="text/css"
    id="" media="all"></link>
<script type="text/javascript" src="qqOnline.js"></script>
<script>
$(function(){
    $("body").Sonline({
        Position:"right",//left或right
        Top:200,//頂部距離，默認200px
        Effect:true, //滾動或者固定兩種方式，布爾值：true或false
        DefaultsOpen:true, //默認展開：true,默認收縮：false
        Qqlist:"418114362|客服a,418114362|客服b,418114362|客服c,418114362|客服d,418114362|客服e" //多個QQ用','隔開，QQ和客服名用'|'隔開
    });
})
</script>
</head>
<body>

</body>
</html>