jquery悬浮在右侧的在线客服代码
2014-01-23 11:11
609 查看
这是一个集合了延时载入滑动展开、可以展开与隐藏、固定在右侧浮动、还具有tab选项卡等多种效果于一身的在线客服代码,在此强烈推荐给大家,要作在线客服的朋友一定不能错过,它的主要特点就是分部门的管理,当你把鼠标移到对应的部门时在左侧展开显示对应的客服内容,里面可以放你想要的任何内容,各部门的切换用的是tab选项卡的效果。
使用说明:
1.引入CSS样式与js文件
2.在线客服内容
3.js代码分析
现在就可以去浏览看看效果了。
下载更多在线客服代码可以访问jsctrlc特效网的在线客服频道:http://www.jsctrlc.com/zaixiankefu/ 可以免费下载哦。
使用说明:
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">•</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> <a href="#" class="ovl">进入体验馆»</a> </div> </div> </div> </div> <div class="list"> <div class="name"> <span class="arrow">•</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> <a href="#" class="ovl">进入体验馆»</a> </div> </div> </div> </div> <div class="list"> <div class="name"> <span class="arrow">•</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> <a href="#" class="ovl">进入体验馆»</a> </div> </div> </div> </div> <div class="list"> <div class="name"> <span class="arrow">•</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> <a href="#" class="ovl">进入体验馆»</a> </div> </div> </div> </div> <div class="list"> <div class="name"> <span class="arrow">•</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> <a href="#" class="ovl">进入体验馆»</a> </div> </div> </div> </div> <div class="list"> <div class="name"> <span class="arrow">•</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> <a href="#" class="ovl">进入体验馆»</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打造的网页右侧自动收缩浮动在线客服代码
- jQuery网页右侧固定层显示隐藏在线qq客服代码
- jquery右侧悬浮弹出在线客服特效
- 网页右侧悬浮滚动在线qq客服代码示例
- 网页右侧悬浮滚动在线qq客服代码示例
- jQuery实现悬浮在右上角的网页客服效果代码
- jQuery实现的网页右下角tab样式在线客服效果代码
- jQuery实现悬浮在右上角的网页客服效果代码
- 基于jquery右侧悬浮加入购物车代码
- 网页HTML右侧浮动DIV层广告或在线客服图片框最佳代码(支持Firefox&IE)
- 17款jQuery在线QQ客服代码分享
- 悬浮右侧可展开搜索的客服代码
- 17款jQuery在线QQ客服代码分享
- 悬浮右侧可展开搜索的客服代码
- 简洁右侧悬浮QQ客服代码
- 绿色清新jQuery在线QQ客服代码
- 17款jQuery在线QQ客服代码分享
- 悬浮右侧可展开搜索的客服代码
- 悬浮滚动网站jquery在线客服
- jQuery实现的网页右下角tab样式在线客服效果代码