博客

一个在线QQ客服代码分析，源码下载自网上， 代码分析由鄙人所写。

效果如下图：

<!--在线客服Begin-->
<div id="floatTools" class="rides-cs">
	<div class="floatL">
		<a style="display: block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" οnclick="javascript:$('#divFloatToolsView').animate

({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show(); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr

('style','display:block');" href="javascript:void(0);">
		展开</a>
		<a style="display: none" id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" οnclick="javascript:$('#divFloatToolsView').animate

({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide(); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr

('style','display:none');" href="javascript:void(0);">
		收缩</a> </div>
	<div id="divFloatToolsView" class="floatR" style="display: none">
		<div class="cn">
			<h3 class="titZx">产品销售</h3>
			<ul>
				<li><span>客服1</span>
				<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes">
				<img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="ShopNC客服1" title="ShopNC客服1" /></a>
				</li>
				</li>
				<li><span>客服2</span>
				<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes">
				<img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="ShopNC客服2" title="ShopNC客服2" /></a></li>
			</ul>
			<h3>大宗订制</h3>
			<ul>
				<li><span>订 制</span>
				<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes">
				<img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="大宗订制服务" title="大宗订制服务" /></a></li>
			</ul>
			<h3>售后服务</h3>
			<ul>
				<li><span>售 后</span>
				<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2979733200&site=qq&menu=yes">
				<img border="0" src="http://wpa.qq.com/pa?p=2:297973320:51" alt="售后服务客服" title="售后服务客服" /></a></li>
			</ul>
		</div>
	</div>
</div>
<!--在线客服End-->

定义一个div，其id为floatTools，css类为rides-cs。在其中包含两个div，css类为floatL的div管左侧部分（打开关闭qq客服窗，灰色背景部分）；css类为

floatR的div管右侧，显示各个qq。

左侧div中包含两个a链接，一个管打开qq客服窗，一个管关闭qq客服窗。其css类分别为btnOpen, btnCtn。点击调用jquery动画函数animate，对右侧div进行

动画；对宽度和透明度属性进行”show”和”hide”的操作。

把如下代码，

<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>

中的123456改为自己的qq客户号码即可。如果改为自己的qq号，点击qq客服，就会提示：

kefu.js中包含如下函数，大部分没用到，需要时可用；

kf_getSafeHTML(s), kf_moveWithScroll(), kf_hide(), kf_hidekfpopup(), kf_getPopupDivHtml(kfguin, reference, companyname, welcomeword, wpadomain),

kf_openChatWindow(flag, wpadomain, kfguin), kf_validateWelcomeword(word), kf_processWelcomeword(word), kf_setCookie(name, value, exp, path, domain),

kf_getCookie(name), kf_sleepShow(), kf_dealErrors(), kf_lTrim(str), kf_rTrim(str), Tong_MoveDiv()

资源下载：

http://pan.baidu.com/s/1bnuO2fH