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>

  • 相关阅读:
    换装WIN10(windows)那点儿事,换装操作系统一文通,玩转安装操作系统
    Win10永久版低价购买及激活工具使用说明
    Win10系统自带软件删除和恢复工具
    微软免费AI作文打分软件升级:雅思考研四六级都能用,还能查单词给替换
    扫描全能王 v5.13.0.20190916 去水印和广告版
    Vue组件
    vue自定义过滤器的创建和使用
    vue自定义指令的创建和使用
    vue的基础使用
    vue的概述
  • 原文地址:https://www.cnblogs.com/zhoumingxiu/p/4564665.html
Copyright © 2011-2022 走看看