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 autocomplete插件修改
Apr 17 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
angular多语言配置详解
May 16 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
jquery对表单操作2
2011/04/06 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python调用C++程序的方法详解
2017/01/24 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
大学自我评价
2014/02/12 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
法人授权委托书范本
2014/04/04 职场文书
入股协议书范本
2014/04/14 职场文书
现实表现材料范文
2014/12/23 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android