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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
与文件上传有关的php配置参数总结
2013/06/14 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
joomla组件开发入门教程
2016/05/04 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python os模块简单应用示例
2019/05/23 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python表达式的优先级详解
2020/02/18 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
高中运动会入场词
2014/02/14 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
优秀广告词大全
2014/03/19 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
世界文化遗产导游词
2015/02/13 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
妈妈别哭观后感
2015/06/08 职场文书
赢在执行观后感
2015/06/16 职场文书
通讯稿范文
2015/07/22 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python