本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考,具体如下:
<!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> <title>滚动到页面顶部加载</title> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/endlesspage.js" type="text/javascript"></script> <style type="text/css"> .mainDiv { width: 800px; border: solid 1px #f00; padding: 10px; } .item { width: 600px; height: 50px; border: solid 1px #00ff90; font-size: 12px; margin: 10px; } .title { font-size: 16px; line-height: 20px; } .content { line-height: 14px; } .alink { display:none; } .loaddiv { display:none; } </style> </head> <body> <h1>滚动测试</h1> <div class="mainDiv"> <!--<div class="item"> <div class="title">title</div> <div class="content">content content content content content content content</div> </div> --> </div> <div class="loaddiv"> <img src="images/loading.gif" /> </div> <div> <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a> </div> </body> </html>
/*endlesspage.js*/ var gPageSize = 10; var i = 1; //设置当前页数,全局变量 $(function () { //根据页数读取数据 function getData(pagenumber) { i++; //页码自动增加,保证下次调用时为新的一页。 $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) { if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }); $.ajax({ type: "post", url: "/ajax/Handler.ashx", data: { pagesize: gPageSize, pagenumber: pagenumber }, dataType: "json", success: function (data) { $(".loaddiv").hide(); if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }, beforeSend: function () { $(".loaddiv").show(); }, error: function () { $(".loaddiv").hide(); } }); } //初始化加载第一页数据 getData(1); //生成数据html,append到div中 function insertDiv(json) { var $mainDiv = $(".mainDiv"); var html = ''; for (var i = 0; i < json.length; i++) { html += '<div class="item">'; html += ' <div class="title">' + json[i].rowId + ' ' + json[i].D_Name + '</div>'; html += ' <div class="content">' + json[i].D_Name + ' ' + json[i].D_Password + '</div>'; html += '</div>'; } $mainDiv.append(html); } //==============核心代码============= var winH = $(window).height(); //页面可视区域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是个参数 if (i % 10 === 0) {//每10页做一次停顿! getData(i); $(window).unbind('scroll'); $("#btn_Page").show(); } else { getData(i); $("#btn_Page").hide(); } } } //定义鼠标滚动事件 $(window).scroll(scrollHandler); //==============核心代码============= //继续加载按钮事件 $("#btn_Page").click(function () { getData(i); $(window).scroll(scrollHandler); }); });
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; using MSCL; using Newtonsoft.Json; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { //核心处理程序 string pageSize = context.Request["pagesize"]; string pageIndex = context.Request["pagenumber"]; if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex)) { context.Response.Write(""); } else { //请结合实际自行取分页数据,可调用分页存储过程 MSCL.PageHelper p = new PageHelper(); p.CurrentPageIndex = Convert.ToInt32(pageIndex); p.FieldsName = "*"; p.KeyField = "d_id"; p.SortName = "d_id asc"; p.TableName = "testtable"; p.EndCondition = "count(*)"; p.PageSize = Convert.ToInt32(pageSize); DataTable dt = p.QueryPagination(); string json = JsonConvert.SerializeObject(dt, Formatting.Indented); context.Response.Write(json); } } public bool IsReusable { get { return false; } } }
[ { "rowId": 1, "D_Id": 1, "D_Name": "名称1", "D_Password": "密码测试1", "D_Else": "其他1" }, { "rowId": 2, "D_Id": 2, "D_Name": "名称2", "D_Password": "密码测试2", "D_Else": "其他2" }, { "rowId": 3, "D_Id": 3, "D_Name": "名称3", "D_Password": "密码测试3", "D_Else": "其他3" }, { "rowId": 4, "D_Id": 4, "D_Name": "名称4", "D_Password": "密码测试4", "D_Else": "其他4" }, { "rowId": 5, "D_Id": 5, "D_Name": "名称5", "D_Password": "密码测试5", "D_Else": "其他5" }, { "rowId": 6, "D_Id": 6, "D_Name": "名称6", "D_Password": "密码测试6", "D_Else": "其他6" }, { "rowId": 7, "D_Id": 7, "D_Name": "名称7", "D_Password": "密码测试7", "D_Else": "其他7" }, { "rowId": 8, "D_Id": 8, "D_Name": "名称8", "D_Password": "密码测试8", "D_Else": "其他8" }, { "rowId": 9, "D_Id": 9, "D_Name": "名称9", "D_Password": "密码测试9", "D_Else": "其他9" }, { "rowId": 10, "D_Id": 10, "D_Name": "名称10", "D_Password": "密码测试10", "D_Else": "其他10" } ]
PS:这里还涉及json格式数据的交互操作,关于json数据操作小编推荐几个本站的在线工具供大家参考,相信在以后的开发中可以派上用场:
在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json
在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson
json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat
C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
本文向大家介绍js实现图片懒加载效果,包括了js实现图片懒加载效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下 图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载; 当有类似于瀑布流的布局时常用的加载模式 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
问题内容: 我有一个网页,当您滚动到底部时,它会通过ajax加载更多结果。您可以在此过程完成之前对其进行多次迭代。有点像facebook。 我试图编写一个Selenium脚本,使其一直走到页面结尾,直到完成为止。 像这样的一半完成了它。我只是不知道如何确定页面是否在底部-因此我可以将其放入某种循环中吗? 我的尝试 会像这样吗? hasScroll()不是真正的方法。我将其放在此处以演示我正在尝试实
本文向大家介绍jQuery滚动加载图片实现原理,包括了jQuery滚动加载图片实现原理的使用技巧和注意事项,需要的朋友参考一下 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一、什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视
本文向大家介绍js实现滚动条滚动到页面底部继续加载,包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项,需要的朋友参考一下 这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果
问题内容: 我的页面上有一个div: 如何使div滚动到div的底部?不是页面,只有DIV。 问题答案: 此处的其他解决方案实际上不适用于内容很多的div -它“最大化”向下滚动到div的高度(而不是div 内容 的高度)。因此,它们将起作用,除非您在其内容中具有div高度的两倍以上。 这是正确的版本: 或jQuery 1.6+版本: 或动画:
本文向大家介绍Android实现图片滚动效果,包括了Android实现图片滚动效果的使用技巧和注意事项,需要的朋友参考一下 Android开发图片滚动效果,供大家参考,具体内容如下 效果图: 设置适配来设置图片位置大小 main添加图片资源 布局 drawable放置图片资源 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。