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 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
采购助理岗位职责
2014/02/16 职场文书
德语专业求职信
2014/03/12 职场文书
关于建议书的格式范文
2014/05/20 职场文书
大学生党员承诺书
2014/05/20 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
地道战观后感500字
2015/06/04 职场文书
卡特教练观后感
2015/06/08 职场文书
罗马假日观后感
2015/06/08 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Pygame Time时间控制的具体使用详解
2021/11/17 Python