网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 jQuery实现下拉加载功能实例代码
内容
    本文通过一段实例代码给大家介绍jquery实现下拉加载功能,代码简单易懂,需要的朋友参考下吧
    直接给大家贴代码了,具体代码如下所示:
    <script>
    var str = '';
    if(page=="") page=1;
    var stop=true;//触发开关,防止多次调用事件
    $(window).scroll( function(event){
    //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
    if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {
    //if(stop==true){
    //stop=false;
    //var canshu="page/"+page+";
    var url = "";
    var parm = {'page':page};
    page=page+1;//当前要加载的页码
    //加载提示信息
    $("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");
    $.post(url,parm,function(data){
    if( data.count == 0 ) {
    $('.prolist-abtn').html('已全部加载完');
    return;
    }
    $.each(eval(data), function(data, val) {
    var url1 = "";
    $(".ajaxtips").hide();
    str = '<div id="showdiv">';
    str +='<div>';
    str +='<a href="url"><div>';
    str +='<img src='+val.imgurl+' /></div>';
    str += '<div><p>'+val.sceneryname+'</p><ul>';
    str += '<li><span>¥</span>';
    str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>';
    str +='</ul></div></a></div></div>';
    $("#showdiv").append(str);//把新的内容加载到内容的后面
    });
    stop=true;
    },'JSON')
    }
    });
    </script>
    以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码,希望对大家有所帮助!
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/13 4:23:49