<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. 深入Java虚拟机读书笔记第二章平台无关性

    Java的体系结构对平台无关的支持 Java平台 Java的体系结构通过几种途径支持Java程序的平台无关性,其中主要是通过Java平台自己.Java平台扮演一个运行时Java程序与其下的硬件和操作系 ...

  2. IOS制作一个漂亮的登录界面

    上图是Facebook的登录界面,看起来很漂亮,eamil框和passwod框合在一起,那么这种效果是怎么做出来的呢?我们都知道输入框用layer属性是可以做成圆角的形式,那么怎么样才能够仅仅只让上边 ...

  3. Spark笔记--使用Maven编译Spark源码(windows)

    1. 官网下载源码 source code,地址: http://spark.apache.org/downloads.html 2. 使用maven编译: 注意在编译之前,需要设置java堆大小以及 ...

  4. HTML CSS简介与图片映射

    1. CSS 入门 内联样式:在 HTML 元素中使用 “style” 属性,需要将表现与内容混在一起: 内部样式表:在 HTML 文档头部 <head> 区域使用 <style&g ...

  5. Spring ApplicationContext的国际化支持

    ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...

  6. MFC一个令人纠心的错误

    IDE生成的代码,运行几次之后开始出现以下这个错误 Error: must call SetScrollSizes() or SetScaleToFitSize() before painting s ...

  7. 《FPGA零基础入门到精通视频教程》-第002计数器(Modelsim前仿真)

    高清视频和配套讲义这里下载 http://www.fpgaw.com/thread-68524-1-1.html 优酷视频

  8. cf B. Making Sequences is Fun

    http://codeforces.com/contest/373/problem/B 用二分枚举长度就可以. #include <cstdio> #include <cstring ...

  9. 玩玩SPARK

    没有SCALA的东东,玩不起哈. ./spark-shell 从文件生成一个DRIVER? val logFile = sc.textFile("hdfs://192.168.14.51:9 ...

  10. fragment的实现与互相通信

    Android3.0后出来的新控件,主要是为了在平板和手机屏幕的兼容 实现效果: 点击Sd卡,出现SD目录下的所有文件和文件夹,点击外置Sd卡,出现外置Sd卡目录下的文件和文件夹.点击U盘,出现U盘目 ...