• 简讯:韩国前总统朴槿惠一审被判24年有期徒刑 2018-08-16
  • 人民网评:走向大洋,呼唤现代化的中国海军 2018-08-16
  • 北京成立学生申诉处理委员会-地方新闻-时政频道-中工网 2018-08-16
  • 虽胜不足喜!鲁能一隐忧不治愈,恐高开低走 2018-08-16
  • 小鱼儿戴胡可帽子似贵妇 临睡之前表白妈妈嘴超甜 2018-08-16
  • “北京8分钟”融入人工智能 通过互联网与国人互动 2018-08-16
  • 四部门调整完善新能源汽车推广应用财政补贴政策 2018-08-15
  • 两男子在吉大美食城“百元找零”诈骗? 2018-08-12
  • 突破!郑鹏创中国队冬残奥会个人项目最好成绩 2018-08-12
  • 今年铜陵市将治理水土流失面积36平方公里 2018-08-11
  • 篮球投注技巧 2018-08-11
  • 威海马上就可以接种四价宫颈癌疫苗 附接种地点 2018-08-10
  • 德赫亚暗示博格巴,像我这样才能在曼联取得成功! 2018-08-10
  • 广州出台“红棉计划”吸引海外人才来穗创新创业 2018-08-10
  • 不敌吉林队 四川男篮赛季排名倒数第二收官 2018-08-10
  • jquery实现随滚动条滚动而加载数据的功能

    栏目: 编程语言 发布于: 2014-05-05 09:09:33

    jquery实现随滚动条滚动而加载数据的功能,目前比较流行的瀑布流就是这种实现形式,具体代码以及使用方法如下:

    <html> 
    <head runat="server"> 
    <title>拉动滚动条加载数据</title> 
    <script src="Scripts/jquery-1.4.1.min.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() <= 100) { if (i >= 100) { return; 
    //控制最大只能加载到100 
    } 
    $('#div1').css("height", $(document).height() + 100);i++; 
    //可以根据实际情况,获取动态数据加载 到 div1中 
    $('<div>' + i + '</div>').appendTo($('#div1')); 
    } 
    }); 
    }) 
    </script> 
    <style> 
    #div1 div 
    { 
    font-size: 100px; 
    background: #ccc; 
    margin-top: 5px; 
    } 
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div style="height: 1000px;" id="div1"> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    </div> 
    </form> 
    </body> 
    </html>

    您可能感兴趣的文章

    • 随滚动条滑动而滑动的DIV层(固定在网页顶部不随浏览滚动而消失的DIV层)
    • 大流量网站该如何实现优化服务器、静态化、数据库优化、负载均衡以实现高负载
    • JS判断滚动条是否停止滚动,兼容IE和火狐浏览器
    • js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
    • 页面应该如何加载javascript才能提高网站性能
    • jquery 实现全选,反选,全不选等功能
    • mysql服务器主从数据库同步配置
    • JavaScript和Jquery动态加载Js文件和Css文件
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:jquery实现随滚动条滚动而加载数据的功能
    IT技术书籍推荐:
    细说PHP(精要版)
    细说PHP(精要版)
    高洛峰 (作者), LAMP兄弟连 (编者)
    PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点?!断杆礟HP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。