jQuery实现悬浮在右上角的网页客服效果代码


Posted in Javascript onOctober 24, 2015

本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码。分享给大家供大家参考,具体如下:

这是款网页在线客服代码,应用了jquery插件,兼容性不错。默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作。

运行效果截图如下:

jQuery实现悬浮在右上角的网页客服效果代码

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.demo_menu{font-size: 14px;text-align: center;margin: 10px 0 0 0;color: #999;line-height: 180%;}
.demo_menu b{color: #333;}
.demo_menu a, .demo_menu a: visited{color: #F00;font-size: 14px;}
.demo_menu a: hover{color: #090;font-size: 14px;}
body{background: #ccc;}
.text{font-size: 12px;}
#kefu{position: fixed;_position: absolute;_top: expression(documentElement.scrollTop + 20 + "px");top: 20px;right: 0;z-index: 999}
#kefu .box-content{position: relative;background-color: #fff;width: 170px;}
#kefu .title-btn, #kefu .qq, #kefu .phone, #kefu .service, #kefu .on span{background: url(images/kefu.png) no-repeat}
#kefu .title-btn{width: 33px;height: 97px;position: absolute;top: 0;left: -33px;}
#kefu .title-btn span{display: none}
#kefu .on span{background-position: -129px 7px;height: 16px;display: block;}
#kefu .pad{padding: 16px 10px 10px;overflow: hidden;font-size: 12px;}
#kefu .pad a{text-decoration: none;}
#kefu .qq{background-position: 0 -118px;display: inline-block;zoom: 1;*display: inline;padding-left: 16px;}
#kefu .phone{height: 28px;background-position: 0 -153px;margin: 18px 0}
#kefu .service{display: inline-block;zoom: 1;*display: inline;height: 51px;background-position: 0 -203px;width: 151px;margin-left: 3px}
#kefu .text{background-color: #ededed;padding: 5px 10px;text-align: center}
#kefu .off{width: 0;}
#kefu .off .pad, #kefu .off .text{display: none}
p, p a{font-size: 12px;color: #666;}
</style>
<title>始终固定在网页右上角的在线客服QQ代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="kefu">
 <div class="box-content off">
  <div class="title-btn cu"><span><a href="#"></a></span></div>
  <div class="pad"> <a href="http://sighttp.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" class="qq" style="margin-right:16px">售前咨询</a><a href="http://sighttp.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" class="qq">广告-合作</a>
   <div class="phone"></div>
   <a href="#" class="service" target="_blank"></a> </div>
  <div class="text"> 客服时间:(9:00-18:00)<br>
   (周六日休息) </div>
 </div>
</div>
<script type="text/javascript"> 
$(".select").hover(
 function () {
  $(this).find(".msgNav").show();
 },
 function () {
  $(this).find(".msgNav").hide();
 }
);
$(".title-btn").toggle(
 function () {
  $(this).addClass("on");
    $(this).parent(".box-content").removeClass("off");
 },
 function () {
  $(this).removeClass("on");
    $(this).parent(".box-content").addClass("off");
 }
);
</script>
</body>
</html>

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

Javascript 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 #Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 #Javascript
js获取表格的行数和列数的方法
Oct 23 #Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 #Javascript
js中对函数设置默认参数值的3种方法
Oct 23 #Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 #Javascript
javascript跨域的方法汇总
Oct 23 #Javascript
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP XML数据解析代码
2010/05/26 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
js给selected添加options的方法
2015/05/06 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
[19:15]DK战队纪录片
2014/09/02 DOTA
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python 实现倒排索引的方法
2018/12/25 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
《海底世界》教学反思
2014/04/16 职场文书
领导班子整改措施
2014/10/24 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Nginx的gzip相关介绍
2022/05/11 Servers