jQuery实现滚动展开（加载）更多内容方法详解

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

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方法即可完成(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>
时间： 2024-09-20 05:33:48

jQuery实现滚动展开（加载）更多内容方法详解的相关文章

php+ajax+jquery实现点击加载更多内容_jquery

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

jQuery+PHP+ajax实现微博加载更多内容列表功能_php技巧

在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

jquery跟js初始化加载的多种方法及区别介绍

 jquery是等待页面加载完数据,以及页面部分元素:js是页面全部加载完成才执行初始化加载,具体示例祥看本文 jquery和js初始化加载页面的区别:  jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频),    js:是页面全部加载完成才执行初始化加载.    1.jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,    第一种(比较常用):  代码如下: $.function(){  alert("第一种方法");  });    第二

jquery跟js初始化加载的多种方法及区别介绍_jquery

jquery和js初始化加载页面的区别: jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. 1.jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本, 第一种(比较常用): 复制代码 代码如下: $.function(){ alert("第一种方法"); }); 第二种: 复制代码 代码如下: $(document).ready(function(){ alert("第二种方法"

js异步加载Javascript代码示例详解

当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:  代码如下 复制代码 function getScript(url, success) {     var script = document.createElement('script');     script.src = url;     var head = document.getElementsByTagName('head')[0],     do

Android AsyncTask 后监听异步加载完毕的动作详解_Android

Android 使用AsyncTask 后监听异步加载完毕的动作   AsyncTask 的使用方法网上有很多例子,使用起来也非常的方便.这里就不详细说具体的使用方法了,同学可以Google 一下,很多. 场景模拟       当我们在加载一个列表的时候,比如GridView ,这时候我们考虑到不阻塞UI的做法,一般会使用线程Thread .Timer 或者使用AsyncTask ,而这些操作都是在在后台另外开一个线程给我们找数据,具体得到的数据需要使用Handler 去更新UI,AsyncTa

Java加载JDBC驱动程序实例详解_java

本文实例说明了Java加载JDBC驱动程序的方法,运行本文实例代码后,如果连接成功就会显示如下一条语句:sun.jdbc.odbc.JdbcOdbcDriver@6ec12,如果连接不成功,则显示加载数据库驱动程序出现异常. Java加载JDBC的实现方法: 通过调用Class.forName()方法可以显式地加载一个驱动程序.该方法的入口参数为要加载的驱动程序.例如:Class.forName("sun.jdbc.odbc.JdbcOdbcDriver")语句加载了SUN 公司开发的

JS动态加载JS文件实例方法详解

1.直接document.write  代码如下 复制代码 <script language="javascript">     document.write("<script src='test.js'></script>"); </script> 2.动态改变已有script的src属性  代码如下 复制代码 <script src='' id="s1"></script>

Android加载View中Background详解_Android

对大多数Android的开发者来说,最经常的操作莫过于对界面进行布局,View中背景图片的加载是最经常做的.但是我们很少关注这个过程,这篇文章主要解析view中背景图片加载的流程.了解view中背景图片的加载(资源的加载)可以让我们对资源加载的过程进行一些优化,另外当需要进行整个应用的换肤时,也可以更得心应手. View图片的加载,我们最常见的就是通过在XML文件当中进行drawable的设置,然后让Android系统帮我们完成,或者手动写代码加载成Bitmap,然后加载到View上.这篇文章主