<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>拉动滚动条加载数据</title>
<script src="jquery-1.7.1.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() <= 40) {
if (i >= 100) {
return;
//控制最大只能加载到100
}
i++;
//可以根据实际情况，获取动态数据加载 到 div1中
$('<div>' + i + '</div>').appendTo($('#div1'));
}
});
})
</script>
<style>
#div1 div {
font-size: 100px;
background: #ccc;
margin-top: 5px;
}

#div2 {
width: 200px;
height: 40px;
line-height: 40px;
background: #999;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
7
</div>
<div>
8
</div>
<div>
9
</div>
<div>
10
</div>
</div>
<div id="div2">数据加载中...</div>
</body>
</html>

jquery 滚动加载的更多相关文章

  1. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  2. JQUERY滚动加载

    $(document).height():整个网页的高度$(window).height():浏览器可视窗口的高度$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直 ...

  3. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  4. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  5. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  6. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  7. 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

    <html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...

  8. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  9. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

随机推荐

  1. linux 命令——PS命令

    首先要明白什么是进程进程是一个正在运行的程序.也就是说在Linux系统上运行的所有东西都是进程.和进程相比较,作业是一系列按一定顺序执行的命令.一条简单的命令可能会涉及多个进程,尤其是当使用管道和重定 ...

  2. C语言基础学习基本数据类型-浮点型

    float和double 加了小数点的数都是浮点数.C语言有两种书写浮点数的方式,一种是使用常用的标准小数点表示法,如下: 0.00056 8.0 1.23 第二种表示浮点值叫做E表示法.下面是一些例 ...

  3. Angular2案例rebirth开源

    Angular2案例rebirth开源 在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于 ...

  4. LINQ to SQL 建立实体类

    使用LINQ to SQL时,需要首先建立用于映射数据库对象的模型,也就是实体类.在运行时,LINQ to SQL 根据LINQ表达式或查询运算符生成SQL语句,发送到数据库进行操作.数据库返回后,L ...

  5. 转：php连接oracle设定字符集，避免乱码

    原文来自于:http://muyu.iteye.com/blog/399884 数据库用oracle,当php连接oracle的时候,最好指定字符集. 查PHP手册,oci_connect的第四个参数 ...

  6. 获取上海地区AQI质量数据Python脚本

    一个获取上海地区AQI质量的Python脚本 https://github.com/yanyueoo7/Raspberrypi/blob/master/GetPmData_Shanghai.py #! ...

  7. poj Candies

    http://poj.org/problem?id=3159 #include<cstdio> #include<queue> #include<cstring> ...

  8. Ansible好像很好玩的样子哟

    这个比SALTSTACK轻量,,不知道速度如何..... 参考文档: http://linux.cn/article-4215-1.html wget http://download.fedorapr ...

  9. logstash 处理tomcat catalina.out

    input { file { type => "zj_api" path => ["/data01/applog_backup/zjzc_log/zj-api ...

  10. 创建组合索引SQL从1个多小时到1S的案例

    select aa.acct_org, aa.loan_acct_no, aa.FUNCTIONARY, aa.cust_no, sum(dwm.pkg_tools.currcdtran(bb.INT ...