jquery 滚动加载
<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 滚动加载的更多相关文章
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
- JQUERY滚动加载
$(document).height():整个网页的高度$(window).height():浏览器可视窗口的高度$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直 ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
随机推荐
- WebAPI下的如何实现参数绑定
本文将概述在WebAPI方式下将如何将参数绑定到一个action方法,包括参数是如何被读取,一系列规则决定特定环境采用的那种绑定方式,文章最后将给出一些实际的例子. Parameter binding ...
- 跨控制器操作-thinkphp
用A函数 或者 $use=new IndexController(); A跨控制器 $data->A("Admin/Index")//admin下面的index控制器 $da ...
- IIS 7.5 部署ASP.Net MVC 网站
請務必註冊 ASP.NET 4.0:若是 32 位元則是 %WINDIR%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis -ir 1.首先确定已经安 ...
- w3wp异常
相信做ASP.NET中大型Web应用的人都碰到过OutOfMemoryException这个异常,对于这个问题我研究了很久,在微软的技术文档上也了解过此问题出现的原因,说实话,到目前我仍然没有完美的解 ...
- jquery easy ui 学习 （9）Pagination in TreeGrid 分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [Python笔记]第八篇:模块
本篇主要内容:python常用模块用法介绍 什么是模块 模块,用一大段代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性 ...
- python执行shell获取硬件参数写入mysql
最近要获取服务器各种参数,包括cpu.内存.磁盘.型号等信息.试用了Hyperic HQ.Nagios和Snmp,它们功能都挺强大的,但是于需求不是太符,亦或者太heavy. 于是乎想到用python ...
- PHP之intval()
Title:PHP之intval() --2014-02-26 13:57 <?php ...... $a='0x2720616e6420313d3220756e696f6e2073656c6 ...
- StateListDrawable 资源
StateListDrawable 用于组织多个 Drawable 对象.当使用 StateListDrawable 作为目标组件 的背景.前景图片时,StateListDrawable 对象所显示的 ...
- Linux&shell之显示数据
写在前面:案例.常用.归类.解释说明.(By Jim) 2>将STDEER输入到一个文件1>将STDOUT输入到一个文件&>将STDEER和STDOUT输入到同一个文件 在脚 ...