欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

jQuery实现滚动展开(加载)更多内容

html code:

<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 提示条

js code:

<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>

php code

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');	
	}

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

<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>

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

更多

本文固定链接: http://shanmao.me/web/jquery/jquery-shi-xian-gun-dong-zhan-kai-jia-zai-geng-duo-nei-rong | 山猫的博客

该日志由 admin 于2012年08月13日发表在 jQuery, php 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery实现滚动展开(加载)更多内容 | 山猫的博客
关键字: ,