拉动滚动条加载数据的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中的对象创建 实例附注释
Feb 08 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
对vue事件的延迟执行实例讲解
Aug 28 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
JS cookie中文乱码解决方法
2014/01/28 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python requests 使用快速入门
2017/08/31 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python docx库用法示例分析
2019/02/16 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python 循环数据赋值实例
2019/12/02 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
Python中Qslider控件实操详解
2021/02/20 Python
关于幼儿的自我评价
2013/12/18 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
理想演讲稿范文
2014/05/21 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL