拉动滚动条加载数据的jquery代码


Posted in Javascript onMay 03, 2012
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>拉动滚动条加载数据</title> 
<script src="Scripts/jquery-1.4.1.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> 
</div> 
<div> 
</div> 
<div> 
</div> 
<div> 
</div> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
基于jquery的固定表头和列头的代码
May 03 #Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 #Javascript
ASP.NET中AJAX 调用实例代码
May 03 #Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 #Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 #Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 #Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 #Javascript
You might like
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php验证码生成代码
2015/11/11 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
NumPy排序的实现
2020/01/21 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
活动策划邀请函
2014/02/06 职场文书
个人委托书范本汇总
2014/10/01 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
答辩状格式范本
2015/05/22 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
python字典进行运算原理及实例分享
2021/08/02 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
德生BCL3000抢先使用感受和评价
2022/04/07 无线电