jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

更新时间：2015年10月23日 09:24:58 作者：企鹅

这篇文章主要介绍了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码,涉及jQuery控制页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码。分享给大家供大家参考，具体如下：

这是一个黑色的QQ客服代码，显示在网页右侧，点击后会向左展开QQ客服的完整内容，适用的网站范围广，以前发过不少的在线客服，每一款都风格不同，你可以在网页特效栏目搜索“在线客服”看下有你需要的不。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一款黑色简洁大气的在线客服代码</title>
<style>
*{margin: 0;padding: 0;}
body{text-align: left;font-size: 12px;}
.kefu_cs{background: rgba(51, 51, 51, 0.9);position: fixed;top: 130px;right: 1px;_position: absolute;z-index: 999;filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E5333333', endColorstr='#E5333333');}
.kefu_cs a{color: #00A0E9;}
.kefu_cs a: hover{color: #ff8100;text-decoration: none;}
.kefu_cs .floatL{width: 36px;float: left;position: relative;z-index: 1;}
.kefu_cs .floatL a{font-size: 0;text-indent: -999em;display: block;}
.kefu_cs .floatR{width: 130px;float: left;padding: 5px;overflow: hidden;}
.kefu_cs .floatR .cn{background: #F7F7F7;}
.kefu_cs .cn h3{font-size: 14px;color: #333;font-weight: 600;line-height: 24px;padding: 5px}
.kefu_cs .cn ul{padding: 0 0 0 8px;}
.kefu_cs .cn ul li{line-height: 38px;height: 38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;}
.kefu_cs .cn ul li span{color: #777;}
.kefu_cs .cn ul li img{vertical-align: middle;}
.kefu_cs .btnOpen, .kefu_cs .btnCtn{position: relative;z-index: 9;top: 0;left: 0;background-image: url(images/kefu.png);background-repeat: no-repeat;display: block;width: 20px;height: 146px;padding: 8px;}
.kefu_cs .btnOpen{background-position: 0px 0;}
.kefu_cs .btnCtn{background-position: -35px 0;}
.kefu_cs ul li.top{border-bottom: solid #ACE5F9 1px;}
.kefu_cs ul li.bot{border-bottom: none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="floatTools" class="kefu_cs">
 <div class="floatL"> <a style="display: block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" onClick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show();kf_setCookie('RightFloatShown', 0, '', '/', 'www.baidu.com'); });$('#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="关闭客服" onClick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide();kf_setCookie('RightFloatShown', 1, '', '/', 'www.baidu.com'); });$('#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=123456&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="售后服务客服" title="售后服务客服" /></a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

GridView中获取被点击行中的DropDownList和TextBox中的值
本文为大家介绍下如何通过点击GridView中的a标签获取被点击行中的下拉框和文本框中的值，具体实现嗲吗如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
jquery实现垂直手风琴菜单
这篇文章主要为大家详细介绍了jquery实现垂直手风琴菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
这篇文章主要介绍了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单,可实现页面向下滑动后导航栏横向悬浮并固定在顶部的功能,涉及jQuery事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2016-09-09
浅析jquery某一元素重复绑定的问题
本篇文章主要是对jquery某一元素重复绑定的问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
EasyUI中实现form表单提交的示例分享
这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码，小伙伴们根据自己的需求补全form部分吧，希望大家能够喜欢。
2015-03-03
jquery实现用户信息修改验证输入方法汇总
这篇文章主要介绍了jquery实现用户信息修改验证输入方法,实例汇总了jquery常用的提交、验证、判定、修改等相关技巧,非常实用,需要的朋友可以参考下
2015-07-07
jQuery初识之设计思想方法函数示例
这篇文章主要为大家介绍了jQuery初识之设计思想及方法函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
关于HTML5的data-*自定义属性的总结
大家总是习惯使用HTML标签添加自定义属性来存储和操作数据，所以才在HTML5规范里增加了一个自定义data属性，这样使用更便捷，一起跟随小编过来看看吧
2018-05-05
jquery 插件实现瀑布流图片展示实例
本文给大家分享的是使用jQuery的masonry库和infinitescroll库实现的瀑布流美女图片展示的实例，效果非常不错，这里推荐给大家，有需要的小火把可以参考下。
2015-04-04
jQuery Chart图表制作组件Highcharts用法详解
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下
2016-06-06