萬盛學電腦網 >> 網絡編程 >> asp.net編程 >> 浏覽器窗口滾動加載數據采用異步形式從後台加載數據
浏覽器窗口滾動加載數據采用異步形式從後台加載數據
在滾動條距頂部距離(頁面超出窗口的高度)時采用異步形式從後台加載數據，下面是具體的實現，希望對大家有所幫助
以下滾動效果為在網上查找。 在滾動條距頂部距離(頁面超出窗口的高度)時采用異步形式從後台加載數據 代碼如下: <%@ 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>asp.net編程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved