jQuery实现滚动展开（加载）更多内容

html code:

[code lang=”html”]
<style>
#press-in span{ display:block}
.loading1,.end_la{ display:none;float:right;margin-right:10px;cursor:pointer;margin-bottom:100px;}
</style>
<div id="press-in"><div style=" text-align:center; padding:10px">
loading…</div>
</div>
<div class="loading1">Loading…</div>//loading 提示条
<div class="end_la"></div>//end 提示条
[/code]

js code:

[code lang=”js”]
<script>
jQuery(function(){
jQuery("#press-in").load("/cityosweb/default.php/shanmao/wppress .press-recent-mk",function(){
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px; display:none" class="loading1">Loading…</span>’);
});
jQuery(".loading1").ajaxStart(function(){
jQuery(this).show();
});
jQuery(".loading1").ajaxStop(function(){
jQuery(this).hide();
});
var i =1;
var winH = $(window).height();
jQuery(window).scroll(function (){
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop();
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
jQuery.getJSON("/cityosweb/default.php/shanmao/wppress_json",{page:i},function(data){
if(data.status==1){
var str = "";
jQuery.each(data.data,function(index,array){
var str ="<span class=’press-recent-mk’><span class=’press-recent-name-box’><span class=\"press-recent-mk-tx\"><img align=\"absmiddle\" src=’"+array[‘ico’]+"’> </span><span class=’press-recent-mk-nanme’>"+array[‘website’]+"</span><span class=’press-recent-mk-date’>"+array[‘time’]+"</span></span><span class=’press-recent-mk-title’> <a href=’"+array[‘url’]+"’ target=’_blank’ rel=’nofollow’>"+array[‘title’]+"</a></span><span class=’press-recent-mk-txt’>\""+array[‘dis’]+"\" </span></span>";
jQuery("#press-in").append(str);//追加内容到div
});
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px" class="loading">Loading…</span>’);
i++;
}else{
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px" class="">End</span>’);
jQuery(".end_la").show().html("End");
}
});
}
});
})
</script>
[/code]

php code
[code lang=”php”]
function wppress_json(){//滚动的时候加载
$wp = M(‘Wppress’);
$input = $_GET[‘page’];
$start = $input*15;
$list = $wp->limit("$start,15")->order("time desc")->select();
//$list[‘time’]=1;

foreach ($list as $key=>$val){//日期转变成我需要的格式
foreach ($val as $key2=>$val2){
if($key2=="time"){
$list[$key][$key2]=date("M d Y",$val2);
}
//dump($list[‘key’][‘key2′]);
}
}
//dump($list);
if($list){
$this->ajaxReturn($list,’success’,1);
}else{
$this->error(‘Date end!’);
}
}

function wppress(){//先加载的15条，也可以不需要这样先写。自己写过吧。
import(‘ORG.Util.Page’);
$wp = M(‘Wppress’);
$count= $wp->count();
$page = new Page($count,15);
$showpage = $page->show();
$list = $wp->limit($page->firstRow.’,’.$page->listRows)->order("time desc")->select();
//dump($list);
$this->assign(‘page’,$showpage);
$this->assign(‘aa’,$list);
$this->display(‘shanmao/wppress.html’);
}
[/code]

这里只用一个php方法即可完成(wppress_json 方法)：

[code lang=”js”]
<script>
jQuery(function(){
jQuery.getJSON("/cityosweb/default.php/shanmao/wppress_json",{page:"0"},function(data){
if(data.status==1){
jQuery("#press-in").html("");
var str = "";
jQuery.each(data.data,function(index,array){
var str ="<span class=’press-recent-mk’><span class=’press-recent-name-box’><span class=\"press-recent-mk-tx\"><img align=\"absmiddle\" src=’"+array[‘ico’]+"’> </span><span class=’press-recent-mk-nanme’>"+array[‘website’]+"</span><span class=’press-recent-mk-date’>"+array[‘time’]+"</span></span><span class=’press-recent-mk-title’> <a href=’"+array[‘url’]+"’ target=’_blank’ rel=’nofollow’>"+array[‘title’]+"</a></span><span class=’press-recent-mk-txt’>"+array[‘dis’]+" </span></span>";
jQuery("#press-in").append(str);
});
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px" class="loading">Loading…</span>’);
Cufon.set(‘fontFamily’, ‘New Epoch’).replace (‘.press-recent-mk-title’);
}
});
//jQuery("#press-in").load("/cityosweb/default.php/shanmao/wppress .press-recent-mk",function(){
//Cufon.set(‘fontFamily’, ‘New Epoch’).replace (‘.press-recent-mk-title’);
//});
jQuery(".loading1").ajaxStart(function(){
jQuery(this).show();
});
jQuery(".loading1").ajaxStop(function(){
jQuery(this).hide();
});
var i =1;
var winH = $(window).height();
jQuery(window).scroll(function (){
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop();
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
jQuery.getJSON("/cityosweb/default.php/shanmao/wppress_json",{page:i},function(data){
if(data.status==1){
var str = "";
jQuery.each(data.data,function(index,array){
var str ="<span class=’press-recent-mk’><span class=’press-recent-name-box’><span class=\"press-recent-mk-tx\"><img align=\"absmiddle\" src=’"+array[‘ico’]+"’> </span><span class=’press-recent-mk-nanme’>"+array[‘website’]+"</span><span class=’press-recent-mk-date’>"+array[‘time’]+"</span></span><span class=’press-recent-mk-title’> <a href=’"+array[‘url’]+"’ target=’_blank’ rel=’nofollow’>"+array[‘title’]+"</a></span><span class=’press-recent-mk-txt’>"+array[‘dis’]+" </span></span>";
jQuery("#press-in").append(str);
});
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px" class="loading">Loading…</span>’);
Cufon.set(‘fontFamily’, ‘New Epoch’).replace (‘.press-recent-mk-title’);
i++;
}else{
//jQuery("#press-in").append(‘<span style="float:right;margin-right:10px;cursor:pointer;margin-bottom:100px" class="">End</span>’);
jQuery(".end_la").show().html("End");
}
});
}
});
})
</script>
[/code]

查看demo : http://www.cityofsteam.com/media/press