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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
微信小程序实现菜单左右联动
May 19 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
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
深入解析Python中的上下文管理器
2016/06/28 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python获取地震信息 微信实时推送
2019/06/18 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
环境监测与治理技术专业求职信
2014/07/06 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
实习单位指导教师评语
2014/12/30 职场文书
班主任工作实习计划
2015/01/16 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
房产电话营销开场白
2015/05/29 职场文书