jQuery实现模仿微博下拉滚动条加载数据效果


Posted in Javascript onDecember 25, 2015

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>滚动条距离底部</title> 
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var i = 4; 
$(window).bind("scroll", function (event) { 
//滚动条到网页头部的 高度,兼容ie,ff,chrome 
var top = document.documentElement.scrollTop + document.body.scrollTop; 
//网页的高度 
var textheight = $(document).height(); 
// 网页高度-top-当前窗口高度  
if (textheight - top - $(window).height() <= 100) { 
if (i >= 100) { 
return; //控制最大只能加载到100 
} 
$('#div1').css("height", $(document).height() + 100); 
i++;  
//可以根据实际情况,获取动态数据加载 到 div1中 
$('<div>' + i + '</div>').appendTo($('#div1')); 
} 
}); 
}) 
</script> 
<style> 
#div1 div{ font-size:100px; background:#ccc;margin-top:5px} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="height: 1000px;" id="div1"> 
<div> 
1</div> 
<div> 
2</div> 
<div> 
3</div> 
<div> 
4</div> 
</div> 
</form> 
</body> 
</html>

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

Javascript 相关文章推荐
js判断浏览器类型的方法
Aug 07 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
You might like
php中动态调用函数的方法
2015/03/16 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python eval函数介绍及用法
2020/11/09 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Java程序员面试题
2013/07/15 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
一般党员对照检查材料
2014/09/24 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Python开发五子棋小游戏
2022/05/02 Python