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 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
随机推荐
- linux的du和df命令
今天也有同学问我Linux下查看目录大小的命令,现在也将前阵子学习到du/df两个命令总结一下吧.前阵子测试工作中有遇到过由于磁盘空间满导致程序无法执行到情况,所以使用了df和du两个命令. du查看 ...
- ueditor 1.4.3.2 独立/单独 上传图片框原理
其实简单的说就是编辑框很多按钮,所有按钮的功能都是以command形式提供,所以execCommand就是执行这些功能的命令.有些按钮是能弹出显示一个对话框,他的基类就是dialog,而所有被弹出的d ...
- php中抽象类和接口的特点、区别和选择
一.特点: 1.抽象类特点 (1) 用 abstract 来修饰一个类,那么这个类就是抽象类:抽象类绝对不能被实例化,即$abc = new 抽象类名();会报错. (2) 用abstract 来修饰 ...
- jquery 事件绑定（1）
$(function(){ $("#panel h5.head").bind("click",function(){ $(this).next().show() ...
- 自然语言处理(1)之NLTK与PYTHON
自然语言处理(1)之NLTK与PYTHON 题记: 由于现在的项目是搜索引擎,所以不由的对自然语言处理产生了好奇,再加上一直以来都想学Python,只是没有机会与时间.碰巧这几天在亚马逊上找书时发现了 ...
- 打印机PCL漏洞原理分析
0x01 漏洞概要 PCL代表打印机控制语言(Printer Control Language),由惠普公司开发,并被广泛使用的一种打印机协议.关于另一种页面描述语言,应该提一提由Adobe设计的Po ...
- 转：CentOS6.3配置yum源
全新以最小化包安装了64位的CentOS6.3系统,作为本地的Web服务器使用,现记录全过程第二步,配置网易163的yum源 1. 下载repo文件 下载地址:http://mirrors.16 ...
- 转：php页面静态化之真静态
之前的缓存和现在所说的页面静态化都是为网站提速的,如果是访问量小的小型网站可能不需要但是如果网站规模或访问量很大,那么页面静态化和缓存就会体现出各自的价值了下面先来了解下页面静态化的分类 页面静态化的 ...
- Hadoop 学习笔记（二） HDFS API
4.删除HDFS上的文件 package proj; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...
- 【Android实战开发】3G技术和Android发展简介
随着移动设备的不断普及和发展,相关软件的开发也越来越受到人们的关注,其中要提及的就是Android开发.本系列博客主要为大家介绍Android的开发,可能会有人问:现在互联网上已经有很多的Androi ...