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>

  • 相关阅读:
    Python爬取中国疫情的实时数据
    文件上传
    条件查询和分页(第三周)
    全国疫情可视化图表
    Jquery的Ajax技术(第二周)
    软件工程开课博客
    求一个整数数组、环形数组中最大子数组的和
    今日所学—Android中ViewPager的使用
    今日所学—Android中ExpandableListView的使用
    你看,蚂蚁金服都上市了,程序员什么时候才能财富自由呢?
  • 原文地址:https://www.cnblogs.com/zhoumingxiu/p/4564665.html
Copyright © 2011-2022 走看看