zoukankan      html  css  js  c++  java
  • jQuery实现当拉动滚动条到底部加载数据

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现当拉动滚动条到底部加载数据</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    var totalheight = 0;//定义一个总的高度变量
    $(window).scroll(function () {
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//浏览器的高度加上滚动条的高度
    if ($(document).height() <= totalheight) //当文档的高度小于或者等于总的高度的时候,开始动态加载数据
    {
    //加载数据
    $("#container").append("我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>我是新加载出来的数据<br/>");
    }
    });
    </script>
    </head>
    <body>
    <div id="container">
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>动态加载数据<br/>
    </div>
    </body>
    </html>

  • 相关阅读:
    【PAT甲级】1128 N Queens Puzzle (20分)
    Codeforces Global Round 7D(马拉车/PAM,回文串)
    【PAT甲级】1127 ZigZagging on a Tree (30分)(已知中序后序蛇形输出层次遍历)
    SDOI2012 体育课
    APIO2018 Circle selection 选圆圈
    [科技] 求数列的前k次方和
    APIO2016 Fireworks
    CTSC2018 暴力写挂
    ZJOI2018 胖
    SDOI2017 数字表格
  • 原文地址:https://www.cnblogs.com/zhoumingxiu/p/4564665.html
Copyright © 2011-2022 走看看