浏览器窗口滚动加载数据

来源：互联网发布：新网站怎么做优化编辑：程序博客网时间：2024/05/29 11:11

以下滚动效果为在网上查找。

在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>滚动加载数据库数据</title>
    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1.min.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();    //滚动条距顶部距离(页面超出窗口的高度)

            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            if (($(document).height() - range) <= totalheight && num != maxnum) {
                $.ajax({
                    url: "../demo/HandlerDemo.ashx",//显示数据的方法页
                    type: "GET",
                    data: "name=json",
                    dataType: "json",
                    //cache: false,
                    success: function (data) {
                        data = eval(data);
                        var varHtml = "";
                        varHtml = "<ul>"
                        $(data).each(function (i) {
                            varHtml += "<li>" + data[i].ID + ":" + data[i].Event + "</li>";  //ID 和Event为数据库映射的字段
                        });
                        varHtml += "</ul>";
                        main.append("<div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "<br />"+varHtml + "---" + num + "</div>");
                    },
                    error: function () {
                        alert("error");
                    }

                });

                num++;
            }
        });
    });
    </script>
    <style type="text/css">
    li
    {
        list-style-type:none;
        float:left;
        padding-left:20px;

    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <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>

</form>
</body>
</html>

0 0