首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的网页右下角tab样式在线客服效果代码

Posted in Javascript onOctober 23, 2015

本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码。分享给大家供大家参考，具体如下：

这是一款网页右下角tab样式的在线客服代码，若在火狐或chrome浏览器下，客服是带边框阴影的，IE8下好像没边框效果，整体不如在Chrome、火狐、Opera浏览器下。这款在线客服代码的底部使用了TAB选项卡的样式，鼠标点击可切换客服的内容，还是挺新颖的。

运行效果截图如下：

jQuery实现的网页右下角tab样式在线客服效果代码

在线演示地址如下：

具体代码如下：

<!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>网页右下角tab样式的在线客服代码</title>
<style>
.contact-bar{position: fixed;bottom: 0;right: 0;width: 400px;overflow: hidden;z-index: 9999}
.contact-bar .cb-btn{float: left;position: relative;height: 38px;font-size: 12px;line-height: 40px;text-transform: uppercase;border: 1px solid #000;border-left: none;color: #FFF;background-color: #292929;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(41,41,41)), to(rgb(0,0,0)));background-image: -webkit-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -moz-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -o-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -ms-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: linear-gradient(top, rgb(41,41,41), rgb(0,0,0));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#292929', EndColorStr='#000000');-moz-box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534;-webkit-box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534;box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534}
.contact-bar .cb-btn: hover, .contact-bar .cb-btn-hover{background-color: #4e4e4e;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78,78,78)), to(rgb(39,39,39)));background-image: -webkit-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -moz-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -o-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -ms-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: linear-gradient(top, rgb(78,78,78), rgb(39,39,39));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#4e4e4e', EndColorStr='#272727');-moz-box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;-webkit-box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;cursor: pointer}
.contact-bar .cb-btn-selected, .contact-bar .cb-btn-selected: hover, .contact-bar .cb-btn-selected.cb-btn-hover{background-image: none;background-color: #232423;-moz-box-shadow: inset 0 5px 20px black;-webkit-box-shadow: inset 0 5px 20px black;box-shadow: inset 0 5px 20px black}
.contact-bar .cb-btn.cb-chat, .contact-bar .cb-btn.cb-phone{width: 178px}
.contact-bar .cb-btn.cb-chat{border-left: 1px solid #000}
.contact-bar .cb-btn-selected.cb-chat{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}
.contact-bar .cb-chat .cb-btn-text{background: url(images/cb-icon-livechat.png) no-repeat 12px 14px}
.contact-bar .cb-phone .cb-btn-text{background: url(images/cb-icon-phone.png) no-repeat 14px 11px}
.contact-bar .cb-btn-text{float: left;height: 38px;padding-left: 40px;font-weight: bold}
.contact-bar .cb-kb, .cb-twitter, .cb-facebook{width: 40px;text-indent: -3000em}
.contact-bar .cb-kb span, .contact-bar .cb-twitter span, .contact-bar .cb-facebook span{float: left;width: 100%}
.contact-bar .cb-kb span{background: url(images/cb-icon-kb.png) no-repeat center center}
.contact-bar .cb-twitter span{background: url(images/cb-icon-twitter.png) no-repeat center center}
.contact-bar .cb-facebook span{background: url(images/cb-icon-facebook.png) no-repeat center center}
.cb-status{position: absolute;right: 0;width: 10px;height: 10px;margin: 15px 10px 16px 0}
.cb-online{background: url(images/cb-status-online.png) no-repeat center center}
.cb-offline{background: url(images/cb-status-offline.png) no-repeat center center}
.cb-popup{z-index: 9998;position: fixed;bottom: 0;right: 0;width: 400px;padding-bottom: 40px;background-color: #FFF;-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36)}
.cb-popup-toolbar{width: 380px;line-height: 10px;padding: 5px 10px}
.cb-popup-close{padding: 5px;font-size: 18px;font-weight: bold;position: absolute;right: 0;top: 0}
.cb-popup-close: hover{cursor: pointer}
.cb-popup-inner{padding: 50px 0;width: 400px;text-align: center}
.cb-popup.chat-invitation{background-color: transparent;height: 168px}
.cb-popup.call-us{height: 168px}
.cb-popup.chat-invitation .cb-popup-close{color: #FFF;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);z-index: 99999}
.cb-popup #eye-catcher{float: left;margin-top: -10px}
.cb-popup #eye-catcher a{background: url(images/livechat.png) no-repeat;height: 170px;width: 400px;display: block;text-indent: -999em}
.cb-popup p{color: #999}
.cb-popup .cb-btn{text-align: center;border: 1px solid #043b8f;color: #FFF;line-height: 20px;font-weight: bold;text-decoration: none;background-color: #49bae3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(73,186,227)), to(rgb(42,73,180)));background-image: -webkit-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -moz-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -o-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -ms-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: linear-gradient(top, rgb(73,186,227), rgb(42,73,180));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#49bae3', EndColorStr='#2a49b4');-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-box-shadow: inset 0 1px 2px #25daee;-webkit-box-shadow: inset 0 1px 2px #25daee;box-shadow: inset 0 1px 2px #25daee;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)}
.cb-btn.cb-btn-first{margin-left: 0}
.cb-btn.cb-btn-last{margin-right: 0}
.cb-form .cb-btn{width: 100%}
.cb-popup .contact-phone{font-size: 30px;font-weight: bold;line-height: 1;margin-bottom: .25em}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  $(".cb-popup-close").click(function() {
    $(".cb-popup").hide();
  });
  $(".cb-chat").click(function() {
    $(".call-us").hide();
    $(".chat-invitation").toggle();
  });
  $(".cb-phone").click(function() {
    $(".chat-invitation").hide();
    $(".call-us").toggle();
  });
});
</script>
</head>
<body style="height:1200px;">
<div class="contact-bar">
 <div class="cb-btn cb-phone"> <span class="cb-btn-text">123456</span> <span class="cb-status cb-online"> </span> </div>
 <div class="cb-btn cb-chat"> <span class="cb-btn-text">在线客服</span> <span class="cb-status cb-online"> </span> </div>
 <div class="cb-btn cb-kb"> <a href="#" target="_blank" title="三水点靠木"><span class="cb-btn-img">三水点靠木</span></a> </div>
</div>
<div class="call-us cb-popup">
 <div class="cb-popup-toolbar"> <span class="cb-popup-close">×</span> </div>
 <div class="cb-popup-inner">
  <div class="popup-contactInfo">
   <div class="contact-phone">123456789</div>
  </div>
  <p>欢迎加入QQ群<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=47d9817e9e09f61b288b8ad6d33fb18cbd659ca244515000d6e5d3a2981a12"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="欢迎加入QQ群" title="欢迎加入QQ群"></a> </p>
 </div>
</div>
<div class="chat-invitation cb-popup" style="display: none;" >
 <div class="cb-popup-toolbar"> <span class="cb-popup-close">×</span> </div>
 <div id="eye-catcher"> <a href="#" onClick="javascript:window.open('http://wp.qq.com/wpa/qunwpa?idkey=4bf27be4ad1c0d244515000be05d9c0efbb2c52ae1feb7247a40950720', '_blank', 'height=405, width=506,toolbar=no,scrollbars=no,menubar=no,status=no');; return false;" title="点击与在线客服交谈">在线客服</a> </div>
</div>
</body>
</html>

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

jQuery实现的网页右下角tab样式在线客服效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery学习3：操作元素属性和特性
Feb 07 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Angular工具方法学习
Dec 26 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
一种angular的方法级的缓存注解（装饰器）
Mar 13 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
js计算文本框输入的字符数
Oct 23 #Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 #Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 #Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 #Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 #Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 #Javascript
js显示当前日期时间和星期几
Oct 22 #Javascript
死亡搁浅(1) 原神(1) 铁拳(1) 大话西游(1) 模拟人生(1) FS1016(1) BCLer(1) 74HC4066(1) AGC(1) 吸血鬼(1)
You might like
PHP笔记之：日期函数的使用介绍
2013/04/24 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
javascript密码强度校验代码（两种方法）
2015/08/10 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Javascript操作表单实例讲解（下）
2016/06/20 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python内置函数reversed()用法分析
2018/03/20 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
详解python对象之间的交互
2020/09/29 Python
致800米运动员广播稿
2014/02/16 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
实习工作表现评语
2014/12/31 职场文书
2016大一新生军训感言
2015/12/08 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书