可以后台数据控制的在线客户漂浮窗口

<div class="www_zzjs_net" id="divwww_zzjs_net">
    <div class="zzjs_net" id="meumid" onmouseover="show()">
        <img src="123.jpg"></div>
    <div class="qqkf" style="display: none;" id="contentid" onmouseout="hideMsgBox(event)">
        <div class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',1,1);" id="qq-1"
            onfocus="this.blur();">
            客 服 中 心</div>
        <div id="K1">
            <asp:Repeater ID="Rp_webqq" runat="server">
                <ItemTemplate>
                    <div class="qqkfhm bgdh">
                        <%#Eval("QQnotse")%></div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
    function showandhide(h_id, hon_class, hout_class, c_id, totalnumber, activeno) {
        var h_id, hon_id, hout_id, c_id, totalnumber, activeno;
        for (var i = 1; i <= totalnumber; i++) {
            document.getElementById(c_id + i).style.display = 'none';
            document.getElementById(h_id + i).className = hout_class;
        }
        document.getElementById(c_id + activeno).style.display = 'block';
        document.getElementById(h_id + activeno).className = hon_class;
    }
    var tips;
    var theTop = 150;
    var old = theTop;
    function initFloatTips() {
        tips = document.getElementById('divwww_zzjs_net');
        moveTips();
    }
    function moveTips() {
        var tt = 50;
        if (window.innerHeight) {
            pos = window.pageYOffset
        } else if (document.documentElement && document.documentElement.scrollTop) {
            pos = document.documentElement.scrollTop
        } else if (document.body) {
            pos = document.body.scrollTop;
        }
        pos = pos - tips.offsetTop + theTop;
        pos = tips.offsetTop + pos / 10;
        if (pos < theTop) {
            pos = theTop;
        }
        if (pos != old) {
            tips.style.top = pos + "px";
            tt = 10;  //alert(tips.style.top);
        }
        old = pos;
        setTimeout(moveTips, tt);
    }
    initFloatTips();
    if (typeof (HTMLElement) != "undefined")    //给firefox定义contains()方法，ie下不起作用
    {
        HTMLElement.prototype.contains = function (obj) {
            while (obj != null && typeof (obj.tagName) != "undefind") { //通过循环对比来判断是不是obj的父元素
                if (obj == this) return true;
                obj = obj.parentNode;
            }
            return false;
        }
    }
    function show() {
        document.getElementById("meumid").style.display = "none"
        document.getElementById("contentid").style.display = "block"
    }
    function hideMsgBox(theEvent) {
        if (theEvent) {
            var browser = navigator.userAgent;
            if (browser.indexOf("Firefox") > 0) {  //如果是Firefox
                if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {  //如果是子元素
                    return
                }
            }
            if (browser.indexOf("MSIE") > 0 || browser.indexOf("Presto") >= 0) {  //如果是IE
                if (document.getElementById('contentid').contains(event.toElement)) {  //如果是子元素
                    return;  //结束函式
                }
            }
        }
        document.getElementById("meumid").style.display = "block";
        document.getElementById("contentid").style.display = "none";
    }
</script>
<style type="text/css">
    .www_zzjs_net a:link
    {
        color: #000;
        text-decoration: none;
    }
    .www_zzjs_net a:visited
    {
        color: #000;
        text-decoration: none;
    }
    .www_zzjs_net a:hover
    {
        color: #f80000;
        text-decoration: underline;
    }
    .www_zzjs_net a:active
    {
        color: #f80000;
        text-decoration: underline;
    }
    .www_zzjs_net
    {
        width: 132px;
        height: auto;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 100px;
        color: #000000;
        font-size: 12px;
        letter-spacing: 0px;
    }
    .zzjs_net
    {
        width: 25px;
        height: 256px;
        overflow: hidden;
        position: relative;
        float: right;
        z-index: 50px;
    }
    .qqkf
    {
        width: 120px;
        height: auto;
        overflow: hidden;
        right: 0;
        top: 0;
        z-index: 99px;
        border: 6px solid #138907;
        background: #fff;
    }
    .qqkfbt
    {
        width: 118px;
        height: 20px;
        overflow: hidden;
        background: #138907;
        line-height: 20px;
        font-weight: bold;
        color: #fff;
        position: relative;
        border: 1px solid #9CD052;
        cursor: pointer;
        text-align: center;
    }
    .qqkfhm
    {
        width: 112px;
      
       
        line-height: 22px;
        padding-right: 8px;
        position: relative;
        margin: 3px 0;
    }
    .bgdh
    {
        width: 102px;
        padding-left: 10px;
    }
</style>