jquery滚动加载数据的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下:

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。

代码如下:

<!DOCTYPE=html>

<html>

<head>

<script src="js/jquery.js" type="text/javascript"></script>

   <script type="text/javascript">

    $(document).ready(function(){

        var range = 50;             //距下边界长度/单位px

        var elemt = 500;           //插入元素高度/单位px

        var maxnum = 20;            //设置加载最多次数

        var num = 1;

        var totalheight = 0; 

        var main = $("#content");                     //主体元素

        $(window).scroll(function(){

            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());

            //console.log("页面的文档高度 :"+$(document).height());

            //console.log('浏览器的高度:'+$(window).height());

            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

            if(($(document).height()-range) <= totalheight  && num != maxnum) {

                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");

                num++;

            }

        });

    });

    </script>

</head>

<body>

    <div id="content" style="height:960px">

        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>

        <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>

    </div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
清空上传控件input file的值
Jul 03 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP时间函数使用详解
2019/03/21 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
js控制CSS样式属性语法对照表
2012/12/11 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python插入数据到列表的方法
2015/04/30 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
白色公司:The White Company
2017/10/11 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
C#面试问题
2016/07/29 面试题
环保倡议书500字
2014/05/15 职场文书
计算机专业求职信
2014/06/02 职场文书
新文化运动的口号
2014/06/21 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
公司股东出资证明书
2014/11/01 职场文书
实训报告范文大全
2014/11/04 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
600字作文之感受大自然
2019/11/27 职场文书
python中subplot大小的设置步骤
2021/06/28 Python