特效介绍
跟随滚动条滚动弹性的带弹出详细信息的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&uin=543031222&site=qq&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>电 话:0551-612345</li> <li>传 真:0551-612345</li> <li>Q Q:543031222</li> <li>地 址:XX市XX区XX路XX号</li> </ul> <a href="http://wpa.qq.com/msgrd?v=3&uin=543031222&site=qq&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号码