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 相关文章推荐
模仿百度三维地图的js数据分享
May 12 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
纯javascript制作日历控件
Jul 17 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
浅谈在node.js进入文件目录的问题
May 13 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 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
PHP与javascript对多项选择的处理
2006/10/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
JS类的封装及实现代码
2009/12/02 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python中的字典遍历备忘
2015/01/17 Python
简单介绍Python中的floor()方法
2015/05/15 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python @property原理解析和用法实例
2020/02/11 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
幼师求职信
2014/06/23 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
大学毕业生自我评价
2015/03/02 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Nginx安装配置详解
2022/06/25 Servers