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


Posted in Javascript onOctober 23, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
JS定时器实例详细分析
Oct 11 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
js实现时间日期校验
May 26 Javascript
js显示当前日期时间和星期几
Oct 22 #Javascript
js检测用户输入密码强度
Oct 22 #Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 #Javascript
实例详解angularjs和ajax的结合使用
Oct 22 #Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 #Javascript
使用jquery插件qrcode生成二维码
Oct 22 #Javascript
JavaScrip调试技巧之断点调试
Oct 22 #Javascript
You might like
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
犀利的js 函数集合
2009/06/11 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
opencv python如何实现图像二值化
2020/02/03 Python
python——全排列数的生成方式
2020/02/26 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
肯尼迪就职演说稿
2013/12/31 职场文书
班级德育工作实施方案
2014/02/21 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书