jQuery实现仿QQ在线客服效果的滚动层代码


Posted in Javascript onOctober 15, 2015

本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码。分享给大家供大家参考。具体如下:

这是一款jQuery滚动层,可以做成仿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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery滚动层,仿QQ在线客服</title>
<style type="text/css">
<!--
#qqonline {
 background-color:Yellow;
 border: 1px solid #fcc;
 position:absolute;
 top:250px;
 left:18px;
 width:200px;
 height:120px;
}
-->
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$().ready(function(){
 $(window).scroll(function() {
  window.setTimeout(function(){
  var bodyTop = 0;
  if (typeof window.pageYOffset != 'undefined') {
   bodyTop = window.pageYOffset;
  } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
   bodyTop = document.documentElement.scrollTop;
  }
  else if (typeof document.body != 'undefined') {
   bodyTop = document.body.scrollTop;
  }
  $("#qqonline").css("top", 100 + bodyTop)
  $("#qqonline").text(bodyTop);
  },300)
 })
});
</script>
</head>
<body style="height:1800px">
 <div id="qqonline">
 QQ在线服务
 </div>
</body>
</html>

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

Javascript 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 #Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 #Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 #Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 #Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 #Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 #Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 #Javascript
You might like
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
vue项目实战总结篇
2018/02/11 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python中的global关键字的使用方法
2019/08/20 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
优秀志愿者事迹材料
2014/02/03 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
产品开发计划书
2014/04/27 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
拾金不昧感谢信
2015/01/21 职场文书
销售工作决心书
2015/02/04 职场文书
2015年高中语文教学总结
2015/08/18 职场文书