jquery悬浮在右侧的在线客服代码

这是一个集合了延时载入滑动展开、可以展开与隐藏、固定在右侧浮动、还具有tab选项卡等多种效果于一身的在线客服代码，在此强烈推荐给大家，要作在线客服的朋友一定不能错过，它的主要特点就是分部门的管理，当你把鼠标移到对应的部门时在左侧展开显示对应的客服内容，里面可以放你想要的任何内容，各部门的切换用的是tab选项卡的效果。

使用说明：

1.引入CSS样式与js文件

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

2.在线客服内容

<div id="chat_f1"><div id="chat_f1_main"><div id="close"></div><a title="点击咨询在线客服" href="#" class="a_kf"></a><a title="点击咨询售后" href="#" class="a_sh"></a></div><div class="chat_f1_expr"><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="客服特效" href="#">客服特效</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>中国浙江</div><div class="mt"><strong>电话：</strong>010-1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="十里河店" href="#">十里河店</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>北京市朝阳区十里河街佰汇广场国际精品家居</div><div class="mt"><strong>电话：</strong>010-1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="宁波店" href="#">宁波店</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>北京市朝阳区朝阳路8号朗廷</div><div class="mt"><strong>电话：</strong>010-1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="亦庄经济开" href="/beijing/expr.html">亦庄经济开</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>北京市通州区马驹桥镇新海南里1</div><div class="mt"><strong>电话：</strong>010-1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="海淀区店" href="#">海淀区店</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>北京市海淀区马连洼北路与圆明园西路交</div><div class="mt"><strong>电话：</strong>010-1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div><div class="list"><div class="name"><span class="arrow">&bull;</span><a title="丰台区店" href="#">丰台区店</a><div class="detail"><div class="border"></div><div class="mt"><strong>地址：</strong>北京市丰台区小屯西路万科中粮假日风景111号院1号楼底商</div><div class="mt"><strong>电话：</strong>1499663238</div><div class="mt mt5"><a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a></div></div></div></div></div><div id="chat_f1_bottom"></div>
</div>
<div id="chat_f2" style="display:none;">我要咨询</div>

3.js代码分析

$('.chat_f1_expr').animate({height:'156px'}, 1000 ); 延时载入效果$('#close').click(function(){ 关闭在线客服功能$('#chat_f1').hide();$('#chat_f2').show();})$('#chat_f2').click(function(){$(this).hide();$('#chat_f1').show();})$('.name').hover(function(){  tab选项卡功能效果$(this).children('.detail').show();$(this).children('.arrow').css('color','#a00');},function(){$(this).children('.detail').hide();   $(this).children('.arrow').css('color','#fff');})

现在就可以去浏览看看效果了。

下载更多在线客服代码可以访问jsctrlc特效网的在线客服频道：http://www.jsctrlc.com/zaixiankefu/ 可以免费下载哦。

jquery悬浮在右侧的在线客服代码相关推荐

QQ在线客服代码，飘浮在右侧的QQ客服js特效演示
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
css+JavaScript+html打造的非常简单漂亮的网站在线客服代码，鼠标划过可以弹出窗口
下面是一网站在线客服css样式 * {padding: 0;margin: 0;border: none; } ul, ol, li {list-style: none; } em, i {font- ...
网页上加在线客服代码QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺
1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将8989215换成你的号码,site后面换成你的网站就可以了) ...
网页MSN,QQ,Skype,贸易通,雅虎通在线客服代码合集
1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将123456换成你的号码,site后面换成你的网站就可以了) & ...
QQ,MSN,Skype在线客服代码
QQ,MSN,Skype在线客服代码在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...
(转)QQ在线客服代码
QQ在线客服代码 2007-11-13 10:04 1. http://is.qq.com/cgi-bin/webpresence/wpa_code?uin=+你的QQ号码: < ...
QQ样式的在线客服代码
QQ样式的在线客服代码,是从其阿里西西转载过来的. /****************************************************** css网站,css资源,css代码, ...
最简单明了的QQ在线客服代码
最近老用来QQ在线客服代码,网上找的都不太顺手,自己写一个简单,只上下飘动. 源码下载:网站被封了,源码下载不了,但是这个源码很简单,相信有点基础的人都知道怎样用. floatAd.js代码如下: v ...
QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺在线客服代码
1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) QQ在线简短代码:tencent://message/?uin=你的 ...
在网页上加QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺在线客服代码
如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将8989215换成你的号码,site后面换成你的网站就可以了) &l ...

jquery悬浮在右侧的在线客服代码

jquery悬浮在右侧的在线客服代码相关推荐

最新文章

热门文章