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 DOM操作 基于命令改变页面
May 06 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
原生js滑动轮播封装
Jul 31 Javascript
解决vue scoped scss 无效的问题
Sep 04 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
python多重继承新算法C3介绍
2014/09/28 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python检测网络延迟的代码
2018/05/15 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Weblogic的布署方式
2013/08/23 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
高三励志标语
2014/06/05 职场文书
淘宝活动总结范文
2014/06/26 职场文书
教师节学生演讲稿
2014/09/03 职场文书
法定代表人授权委托书
2014/09/19 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
导游词之河北野三坡
2019/12/11 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
手把手教你导入Go语言第三方库
2021/08/04 Golang