scroll

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>滚动到页面顶部加载</title>  
  5.     <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>  
  6.     <script src="js/endlesspage.js" type="text/javascript"></script>  
  7.      <style type="text/css">  
  8.             .mainDiv {  
  9.                  800px;  
  10.                 border: solid 1px #f00;  
  11.                 padding: 10px;  
  12.             }  
  13.   
  14.             .item {  
  15.                  600px;  
  16.                 height: 50px;  
  17.                 border: solid 1px #00ff90;  
  18.                 font-size: 12px;  
  19.                 margin: 10px;  
  20.             }  
  21.   
  22.             .title {  
  23.                 font-size: 16px;  
  24.                 line-height: 20px;  
  25.             }  
  26.   
  27.             .content {  
  28.                 line-height: 14px;  
  29.             }  
  30.             .alink  
  31.             {  
  32.                 display:none;  
  33.             }  
  34.             .loaddiv  
  35.             {  
  36.                display:none;   
  37.             }  
  38.      </style>  
  39. </head>  
  40. <body>  
  41.     <h1>滚动测试</h1>  
  42.     <div class="mainDiv">  
  43.         <!--<div class="item">  
  44.             <div class="title">title</div>  
  45.             <div class="content">content content content content content content content</div>  
  46.         </div>  
  47.         -->  
  48.     </div>  
  49.     <div class="loaddiv">  
  50.         <img src="images/loading.gif" />  
  51.     </div>  
  52.     <div>  
  53.         <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>  
  54.     </div>  
  55. </body>  
  56. </html> 
  1. /*endlesspage.js*/  
  2. var gPageSize = 10;  
  3. var i = 1; //设置当前页数，全局变量  
  4. $(function () {  
  5.     //根据页数读取数据  
  6.     function getData(pagenumber) {  
  7.         i++; //页码自动增加，保证下次调用时为新的一页。  
  8.         $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {  
  9.             if (data.length > 0) {  
  10.                 var jsonObj = JSON.parse(data);  
  11.                 insertDiv(jsonObj);  
  12.             }  
  13.         });  
  14.         $.ajax({  
  15.             type: "post",  
  16.             url: "/ajax/Handler.ashx",  
  17.             data: { pagesize: gPageSize, pagenumber: pagenumber },  
  18.             dataType: "json",  
  19.             success: function (data) {  
  20.                 $(".loaddiv").hide();  
  21.                 if (data.length > 0) {  
  22.                     var jsonObj = JSON.parse(data);  
  23.                     insertDiv(jsonObj);  
  24.                 }  
  25.             },  
  26.             beforeSend: function () {  
  27.                 $(".loaddiv").show();  
  28.             },  
  29.             error: function () {  
  30.                 $(".loaddiv").hide();  
  31.             }  
  32.         });  
  33.     }  
  34.     //初始化加载第一页数据  
  35.     getData(1);  
  36.   
  37.     //生成数据html,append到div中  
  38.     function insertDiv(json) {  
  39.         var $mainDiv = $(".mainDiv");  
  40.         var html = '';  
  41.         for (var i = 0; i < json.length; i++) {  
  42.             html += '<div class="item">';  
  43.             html += ' <div class="title">' + json[i].rowId + '   ' + json[i].D_Name + '</div>';  
  44.             html += ' <div class="content">' + json[i].D_Name + '   ' + json[i].D_Password + '</div>';  
  45.             html += '</div>';  
  46.         }  
  47.         $mainDiv.append(html);  
  48.     }  
  49.   
  50.     //==============核心代码=============  
  51.     var winH = $(window).height(); //页面可视区域高度   
  52.   
  53.     var scrollHandler = function () {  
  54.         var pageH = $(document.body).height();  
  55.         var scrollT = $(window).scrollTop(); //滚动条top   
  56.         var aa = (pageH - winH - scrollT) / winH;  
  57.         if (aa < 0.02) {//0.02是个参数  
  58.             if (i % 10 === 0) {//每10页做一次停顿！  
  59.                 getData(i);  
  60.                 $(window).unbind('scroll');  
  61.                 $("#btn_Page").show();  
  62.             } else {  
  63.                 getData(i);  
  64.                 $("#btn_Page").hide();  
  65.             }  
  66.         }  
  67.     }  
  68.     //定义鼠标滚动事件  
  69.     $(window).scroll(scrollHandler);  
  70.     //==============核心代码=============  
  71.   
  72.     //继续加载按钮事件  
  73.     $("#btn_Page").click(function () {  
  74.         getData(i);  
  75.         $(window).scroll(scrollHandler);  
  76.     });  
  77. });  
  1. <%@ WebHandler Language="C#" Class="Handler" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Data;  
  6. using MSCL;  
  7. using Newtonsoft.Json;  
  8.   
  9. public class Handler : IHttpHandler {  
  10.   
  11.     public void ProcessRequest(HttpContext context)  
  12.     {  
  13.         //核心处理程序  
  14.         string pageSize = context.Request["pagesize"];  
  15.         string pageIndex = context.Request["pagenumber"];  
  16.         if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))  
  17.         {  
  18.             context.Response.Write("");  
  19.         }  
  20.         else  
  21.         {  
  22.             //请结合实际自行取分页数据，可调用分页存储过程  
  23.             MSCL.PageHelper p = new PageHelper();  
  24.             p.CurrentPageIndex = Convert.ToInt32(pageIndex);  
  25.             p.FieldsName = "*";  
  26.             p.KeyField = "d_id";  
  27.             p.SortName = "d_id asc";  
  28.             p.TableName = "testtable";  
  29.             p.EndCondition = "count(*)";  
  30.             p.PageSize = Convert.ToInt32(pageSize);  
  31.             DataTable dt = p.QueryPagination();  
  32.             string json = JsonConvert.SerializeObject(dt, Formatting.Indented);  
  33.             context.Response.Write(json);  
  34.         }  
  35.     }  
  36.    
  37.     public bool IsReusable {  
  38.         get {  
  39.             return false;  
  40.         }  
  41.     }  
  42.   
  43. }  
  1. [  
  2.   {  
  3.     "rowId": 1,  
  4.     "D_Id": 1,  
  5.     "D_Name": "名称1",  
  6.     "D_Password": "密码测试1",  
  7.     "D_Else": "其他1"  
  8.   },  
  9.   {  
  10.     "rowId": 2,  
  11.     "D_Id": 2,  
  12.     "D_Name": "名称2",  
  13.     "D_Password": "密码测试2",  
  14.     "D_Else": "其他2"  
  15.   },  
  16.   {  
  17.     "rowId": 3,  
  18.     "D_Id": 3,  
  19.     "D_Name": "名称3",  
  20.     "D_Password": "密码测试3",  
  21.     "D_Else": "其他3"  
  22.   },  
  23.   {  
  24.     "rowId": 4,  
  25.     "D_Id": 4,  
  26.     "D_Name": "名称4",  
  27.     "D_Password": "密码测试4",  
  28.     "D_Else": "其他4"  
  29.   },  
  30.   {  
  31.     "rowId": 5,  
  32.     "D_Id": 5,  
  33.     "D_Name": "名称5",  
  34.     "D_Password": "密码测试5",  
  35.     "D_Else": "其他5"  
  36.   },  
  37.   {  
  38.     "rowId": 6,  
  39.     "D_Id": 6,  
  40.     "D_Name": "名称6",  
  41.     "D_Password": "密码测试6",  
  42.     "D_Else": "其他6"  
  43.   },  
  44.   {  
  45.     "rowId": 7,  
  46.     "D_Id": 7,  
  47.     "D_Name": "名称7",  
  48.     "D_Password": "密码测试7",  
  49.     "D_Else": "其他7"  
  50.   },  
  51.   {  
  52.     "rowId": 8,  
  53.     "D_Id": 8,  
  54.     "D_Name": "名称8",  
  55.     "D_Password": "密码测试8",  
  56.     "D_Else": "其他8"  
  57.   },  
  58.   {  
  59.     "rowId": 9,  
  60.     "D_Id": 9,  
  61.     "D_Name": "名称9",  
  62.     "D_Password": "密码测试9",  
  63.     "D_Else": "其他9"  
  64.   },  
  65.   {  
  66.     "rowId": 10,  
  67.     "D_Id": 10,  
  68.     "D_Name": "名称10",  
  69.     "D_Password": "密码测试10",  
  70.     "D_Else": "其他10"  
  71.   }  
  72. ]  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cina33blogs/p/7806667.html