运维

当前位置:永利皇宫463登录 > 运维 > 实现滚动条下拉时无限加载的简单实例_jquery_脚本

实现滚动条下拉时无限加载的简单实例_jquery_脚本

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-12-08 07:12

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考,具体如下:

您可能感兴趣的文章:

  • 基于jquery实现页面滚动到底自动加载数据的功能
  • jQuery滚动加载图片实现原理
  • jQuery结合AJAX之在页面滚动时从服务器加载数据
  • jQuery实现页面滚动时动态加载内容的方法
  • jquery滚动加载数据的方法
  • jquery浏览器滚动加载技术实现方案
  • jquery 页面滚动到底部自动加载插件集合
  • 基于JQuery实现滚动到页面底端时自动加载更多信息
  • jQuery滚动加载图片效果的实现
  • 拉动滚动条加载数据的jquery代码
  • asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
  • asp.net+jquery滚动滚动条加载数据的下拉控件

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考,具体如...

脚本:

  滚动条距离底部   $ { var i = 4; $.bind("scroll", function  { //滚动条到网页头部的 高度,兼容ie,ff,chrome var top = document.documentElement.scrollTop + document.body.scrollTop; //网页的高度 var textheight = $; // 网页高度-top-当前窗口高度 if (textheight - top - $ <= 100) { if  { return; //控制最大只能加载到100 } $.css.height; i++; //可以根据实际情况,获取动态数据加载 到 div1中 $('<div>' + i + '</div>').appendTo   #div1 div{ font-size:100px; background:#ccc;margin-top:5px}      

jQuery实现模仿微博下拉滚动条加载数据效果,

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>滚动条距离底部</title> 
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var i = 4; 
$(window).bind("scroll", function (event) { 
//滚动条到网页头部的 高度,兼容ie,ff,chrome 
var top = document.documentElement.scrollTop + document.body.scrollTop; 
//网页的高度 
var textheight = $(document).height(); 
// 网页高度-top-当前窗口高度  
if (textheight - top - $(window).height() <= 100) { 
if (i >= 100) { 
return; //控制最大只能加载到100 
} 
$('#div1').css("height", $(document).height() + 100); 
i++;  
//可以根据实际情况,获取动态数据加载 到 div1中 
$('<div>' + i + '</div>').appendTo($('#div1')); 
} 
}); 
}) 
</script> 
<style> 
#div1 div{ font-size:100px; background:#ccc;margin-top:5px} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="height: 1000px;" id="div1"> 
<div> 
1</div> 
<div> 
2</div> 
<div> 
3</div> 
<div> 
4</div> 
</div> 
</form> 
</body> 
</html> 

希望本文所述对大家jQuery程序设计有所帮助。

思路:

希望本文所述对大家jQuery程序设计有所帮助。

以上这篇jquery 实现滚动条下拉时无限加载的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关。 var isloading = false; $.bind { if .scrollTop.height.height { isloading = true; getMore;function getMore() { var url = "ajaxdata.aspx"?lastId=" + lastId +"&type=" + 其他参数 $.getJSON { var html=""; ... ... $.insertAfter; isloading = false; } }

通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。

本文由永利皇宫463登录发布于运维,转载请注明出处:实现滚动条下拉时无限加载的简单实例_jquery_脚本

关键词: