首页 > 技术资源分享 > jQuery源码分享 > JS(jQuery)实现文章列表拖动到页面底部,自动加载新的文章列表
2012
11-30

JS(jQuery)实现文章列表拖动到页面底部,自动加载新的文章列表

最近需要写一个能够让文章列表拖动到页面底部,自动加载新文章的列表页面。

其实这种功能在QQ空间之类的网站中早已有体现。

下面自己写了个ajax实现该功能。

该代码使用了jQuery框架,请大家自行下载。

代码如下:

$(document).ready(function(){

var num = 1; //计数器初始化为1

var maxnum = 100; //设置一共要加载几次

$(window).scroll(function(){

checkload();

});

//建立加载判断函数

function checkload(){

var srollPos = $(window).scrollTop(); //滚动条距离顶部的高度

var windowHeight = $(window).height(); //窗口的高度

var dbHiht = $(“body”).height(); //整个页面文件的高度

s= setTimeout(function(){

if((windowHeight + srollPos) >= (dbHiht) && num != maxnum){

LoadList(14);

num++; //计数器+1

}

},500);

}

//创建ajax加载函数,并设置变量C,用于输入调用的页面频道,请根据实际情况判断使用,非必要。

function LoadList(c){

$.get(“http://www.frontopen.com/xxx.php?chanel=”+ c +“&start=”+ num * 15 +“&num=15”, function(result){

t = setTimeout(function(){$(“#list_box”).append(result)},1);

});

}

});

 

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!