萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> 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>   
copyright © 萬盛學電腦網 all rights reserved