<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. Apache Commons DbUtils Problem

  2. AutoMapper DynamicMap天坑

    如果调用Mapper.DynamicMap该方法,会将所有映射重置为默认映射,即以字段名匹配映射.

  3. linux指令tips

    1.调用命令使用应用名称免路径.   例如在路径 /usr/local/mobile/php538 建立了php应用,在调用php命令的时候,我们需要加路径访问 如 /usr/local/mobile ...

  4. js 实现 C# 的 format 方法

    2014-11-08 12:18:51 更新,修复原形链方法被当作关键词的bug,其实之前是想用全局关键词的,不过还是算了,array里有太多单词了.                          ...

  5. svn ， github工作流

    svn 需要有一台中央服务器,所有的分支,主干,标签,全都保存在这台中央服务器上.开发着需要提交代码时,需要保持中央服务器连接.切换分支时会有本地与服务器网络连接. git 改进了这一点,每台安装有g ...

  6. 转：Netty系列之Netty高性能之道

    1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用Netty4 + Thrift压缩二进制编解码技术,他们实现了10W TPS(1K的复杂POJO对象)的跨节点远程服务调用 ...

  7. WinDebug 常用命令表【摘】

    启动, 附加进程, 执行和退出(Starting, Attaching, Executing and Exiting) ======================= Start -> All ...

  8. poj 2492A Bug's Life

    http://poj.org/problem?id=2492 #include<cstdio> #include<cstring> #include<algorithm& ...

  9. Ansible二三事

    现在,慢慢测试一下ANSIBLE的功能,不过,总体感觉是,比SALTSTACK运行要慢,好像还有点点不稳定.... 但,在局域环境的表现,还是不错的... ~~~~~~~~~~~~~ 有几个小事要注意 ...

  10. MFC浅析(4) CObject浅析

    MFC CObject浅析 1.CObject简要声明 2.CRuntimeClass结构 3.RUNTIME_CLASS 4.DYNAMIC支持 5.DYNCREATE支持 6.SERIAL支持 C ...