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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
原生JS进行前后端同构
Apr 22 Javascript
tsconfig.json配置详解
May 17 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代码
2008/09/10 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
bootstrap table实例详解
2017/01/06 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
python实现用户答题功能
2018/01/17 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python字符串格式化方式解析
2019/10/19 Python
python连接mongodb集群方法详解
2020/02/13 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python json格式化打印实现过程解析
2020/07/21 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
表演方阵解说词
2014/02/08 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers