一个在线QQ客服代码分析
一个在线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
一个在线QQ客服代码分析相关推荐
- php右侧弹窗QQ客服,JavaScript_网页右侧悬浮滚动在线qq客服代码示例,网页右侧悬浮滚动QQ在线客服 - phpStudy...
网页右侧悬浮滚动在线qq客服代码示例 网页右侧悬浮滚动QQ在线客服代码 function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEve ...
- 轻松解决在线QQ客服未启用状态
最近有好多商家问我为什么QQ在线不能用了,店铺的QQ在线客服图标,出现了未启用标志,怎样解决?百度了下,原来是由于腾讯公司近期QQ升级,导致一些网站的在线QQ出现了"未启用"的显示 ...
- 手机端qq客服代码点击弹出qq聊天窗http://www.51xuediannao.com/jiqiao/1026.html
手机端qq客服代码点击弹出qq聊天窗 来源:web前端开发 作者: 懒人建站 日期:2016-12-02 人气:5256 在手机端qq客服代码点击弹出qq聊天窗怎么实现那?其实和web端qq客服代码一 ...
- 怎样写网站QQ客服代码
工具/原料 HTML编辑器,推荐:notepad++ 方法/步骤 1 找到要添加QQ客服的地方,将以下代码复制粘贴到需要添加的地方 <!--QQ客服代码开始--> <div id=& ...
- 网站在线QQ客服功能
在线QQ客服功能 http://connect.qq.com/intro/wpa <a target="_blank" href="http://wpa.qq.co ...
- java 在线qq客服_jquery实现漂浮在网页右侧的qq在线客服插件
很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话.具体实现代码如下: html页面: jquery实现qq客服 $(function(){ $("body").Sonl ...
- (转)网页在线QQ客服咨询html代码
本文中的QQ号码为演示用,自己使用的时候请更改. 步骤: 首先在QQ商家设置代码中的QQ号码(2632674343)为在线状态: 用这个商家QQ(2632674343)登录http://shang.q ...
- 如何在网站上设置在线QQ客服
第一步:首先登陆QQ商家网址,点击"立即免费使用". 第二步:进入商家沟通组件---QQ通讯组件页面设置. 第三步:选择"商家沟通组件"下面的"QQ通 ...
- 网页在线QQ客服生成方法
直接进这个网址就一目了然了 点我进入 这里只是获取到这个图标,为了好看一点,我们需要将图标放到网页右边中间,实现方法如下: <html xmlns="http://www.w3.org ...
- 网页悬浮在线人工客服代码.
https://download.csdn.net/download/billhepeng/11968858
最新文章
- JavaScript初学者编程题(4)
- EXCEL 数字+E+数字 自动识别为指数形式的解决办法
- hystrix 单独使用_Spring cloud微服务架构-Hystrix工作原理(微服务故障熔断)
- Python数据结构学习笔记——树和图
- Oracle的Net Configuration Assistant 配置
- 11月14号站立会议(从即日14号起到24号截至为final阶段工作期)
- 网络版ATM项目的实现——客户端
- 小程序解码时 php 7.0以上 mcrypt拓展无法使用 旧版本的解密解决方案 新版本在另外一篇文章
- JSP直接调用一个action定向到页面
- 内置对象 API Math对象、Data对象、Array对象、String对象
- 大数据分析有什么特点
- 修改 cmd 控制台默认代码页编码
- sql-server 不允许保存更改,解决办法
- pb 使用mysql_pb连接mySql数据库
- html,实现心动的表白代码
- picgo、gitee、typora打造最好的markdown书写工具
- 《算法竞赛进阶指南》刷题记录
- 小红伞免费杀毒软件设置优化
- Python离线翻译
- Vollendet und in alle Einzelheiten durchgebildet
热门文章
- 思源黑体与思源宋体的区别
- 蒙提霍尔问题(三门问题)的思考与贝叶斯分析
- ECharts 简明教程,用js输出图表
- 手写springboot
- android 对话框Dialog拦截activity事件通知
- 三极管开关电路_三极管在开关电路中的详细应用分析
- excel文件修复工具_免费的PDF转Word软件有哪些?各种文件格式转换工具推荐
- matlab 报童 泊松分布函数,数学建模和工科数学分析(2)
- 使用Canvas绘制简单工程符号(续)
- XP连接网络计算机未启动服务,网络不存在或尚未启动/以及局域网互访的解决办法...