您的位置:首页> 日志> 前端技术 正文

 

说明:

将需要增加的qq号码替换模板内的演示号码(演示中是11111111,22222222,33333333),

也可根据需要按已有格式增、删qq号码。

(其中注释掉的部分为系统cookies方法记录浮窗的开启/关闭状态。)

需要修改的地方:

<li><a href="http://wpa.qq.com/msgrd?v=3&uin=11111111&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服1</a></li>
<li><a href="http://wpa.qq.com/msgrd?v=3&uin=22222222&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服2</a></li>
<li><a href="http://wpa.qq.com/msgrd?v=3&uin=33333333&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服3</a></li>
.
.
.
<script src="http://webpresence.qq.com/getonline?Type=1&11111111:22222222:33333333:"></script>

 

标签下载:

/UploadFiles/Article/20131/201301021425210561.rar

 

静态预览效果:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线客服</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
    * { padding: 0; margin: 0; font-size: 12px; } 
    ul { list-style: none; }
    a { text-decoration: none; }
    </style>
    <link rel="stylesheet" href="http://dtop.powereasy.net/DemoRes/demoLR/kefu/kefu.css">
</head>
<body>
    
<div id="box-kefu">
    <div class="kefu-close"></div>
    <div class="kefu-open">
        <div>
        <ul>
            <li><a href="http://wpa.qq.com/msgrd?v=3&uin=11111111&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服1</a></li>
            <li><a href="http://wpa.qq.com/msgrd?v=3&uin=22222222&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服2</a></li>
            <li><a href="http://wpa.qq.com/msgrd?v=3&uin=33333333&site=qq&menu=yes" target="_blank"><i class="qq"></i>在线客服3</a></li>
            <li><a href="/Category_0/Index.aspx"><i class="txt"></i>咨询留言</a></li>
        </ul>
        </div>
        <a href="javascript:;" class="close">关闭</a>
    </div>
</div>
<script>var online= new Array();</script>
<script src="http://webpresence.qq.com/getonline?Type=1&11111111:22222222:33333333:"></script>
<script>
(function($){
    for (var i=0; i<online.length; i++) {
        if (online[i]) jQuery("#box-kefu .qq").eq(i).addClass("online");
    }
    var _open = $("#box-kefu").find(".kefu-open"),
        _close = $("#box-kefu").find(".kefu-close");
    
    /*
    if ( $.pe.cookie("kefuClose")=="true" ) {
        _open.width(0);
        _close.width(34);
    }
    */
    
    _open.find("a").hover(function(){
        $(this).stop(true,true).animate({paddingLeft:20},200).find("i").stop(true,true).animate({left:75},200);
    },function(){
        $(this).stop(true,true).animate({paddingLeft:35},200).find("i").stop(true,true).animate({left:10},200);
    });
    
    _open.find(".close").click(function(){
        _open.animate({width:148},200,function(){
            _open.animate({width:0},200,function(){
                _close.animate({width:34},200);
                //$.pe.cookie("kefuClose",true,{path:"/"});
            });
        });
    });
    _close.click(function(){
        _close.animate({width:44},200,function(){
            _close.animate({width:0},200,function(){
                _open.animate({width:138},200);
                //$.pe.cookie("kefuClose",false,{path:"/"});
            });
        });
    });
})(jQuery)
</script>
</body>
</html>