拉动滚动条加载数据的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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue router 组件的高级应用实例代码
2019/04/08 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
pandas值替换方法
2018/07/10 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python 实现return返回多个值
2019/11/19 Python
基于python中__add__函数的用法
2019/11/25 Python
浅析Python3 pip换源问题
2020/01/06 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
先进班级集体事迹材料
2014/01/30 职场文书
电子银行营销方案
2014/02/22 职场文书
《开国大典》教学反思
2014/04/19 职场文书
导游词幽默开场白
2019/06/26 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书