跟随滚动条滚动带弹出详细信息的js在线QQ客服

跟随滚动条滚动弹性的带弹出详细信息的js在线QQ客服，兼容ie等主流浏览器，可以设置详细信息。

1、在head区引入如下代码：

<script type="text/javascript" src="js/qqchat.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />

2、将下面代码放到</body>前

<div id="qqChat" class="qqChat" style="top:114px;">
    <div class="linkQQ">
        <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=543031222&amp;site=qq&amp;menu=yes" target="_blank"><img border="0" title="点击这里给我发消息" alt="点击这里给我发消息" src="http://www.5imoban.net/uploads/allimg/131231/12423LN1-0.png"></a>
    </div>
    <div id="adrressShow" class="adrressShow" style="width: 0px; right: 48px;">
        <ul>
            <li>联系人:我爱模版网</li>
            <li>电&#12288;话:0551-612345</li>
            <li>传&#12288;真:0551-612345</li>
            <li>Ｑ&#12288;Ｑ:543031222</li>
            <li>地&#12288;址:XX市XX区XX路XX号</li>
        </ul>
        <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=543031222&amp;site=qq&amp;menu=yes" target="_blank" class="minChatQQ"><img border="0" title="点击这里给我发消息" alt="点击这里给我发消息" src="http://wpa.qq.com/pa?p=2:543031222:41"></a>
    </div>
</div>
<script type="text/javascript">
    (function(){
        var qqChat = dream('#qqChat'),
            timeout,
            adrressShow = dream('#adrressShow');
            timeout2 = setTimeout(function(){adrressShow.animate({width:0,right:48},800);;},5000);
        dream([window]).addEvent('scroll',function(){
            timeout && clearTimeout(timeout);
            timeout = setTimeout(function(){qqChat.animate({top:dream.getScrollPosition().top+114},500);},100);
        });
        qqChat.addEvent('mouseover',function(){
            timeout2 && clearTimeout(timeout2);
            adrressShow.animate({width:323,right:50},500);
        })
        .addEvent('mouseout',function(){
            timeout2 && clearTimeout(timeout2);
            adrressShow.animate({width:0,right:48},500);
        });
    })();
</script>

3、将里面的信息换成你公司信息。把543031222全部换成你的QQ号码


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！