• 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. ]  
  • 相关阅读:
    spring-mybatis 事物配置 execution表达式含义
    微信内置浏览器缓存导致链接无法多次访问
    linux学习记录-------解决复制的虚拟机，无法同时上网
    mybatis-select-insert-update-delete
    tomcat 端口被占用
    EFCodeFirst安装失败（包括EntityFrameWork安装），这样解决。。。
    数组的一些操作
    《Java技术》第三次作业--面向对象——继承、抽象类、接口
    java第二次作业
    《Java技术》第一次作业
  • 原文地址：https://www.cnblogs.com/cina33blogs/p/7806667.html
Copyright © 2020-2023  润新知