JS实现点击加载更多效果

适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果。。。(宝宝心里苦啊)
 
点击加载更多效果:
        第一个和第二个参数分别是btn和ul的DOM(必填)
        第三个参数,默认显示条数(必填)
        第四个参数,每次加载的条数(必填)
        第五个参数,slideDown的速度,类型是数字,默认为400(选填)
 
CSS部分
        a.load-more{   /* 点击按钮 */
                visibility: hidden;
        }
 
JS代码
     function giveMore(button,targetUl,showNumber,loadNumber,speed){
            var list = showNumber;
            var ul = jQuery(targetUl);
            var sum = ul.find("li").hide().size();
            if(sum > list) jQuery(button).css("visibility","visible");
            ul.find("li:lt(" + list + ")").show();
            jQuery(button).on("click",function(){
                list += loadNumber;
                ul.find("li:lt(" + list + ")").slideDown(speed?speed:400);
                if(list >= sum) jQuery(this).css("visibility","hidden");
            });
        }
      giveMore(".give-more-blog","#blog-mainbody",8,4,200);    // 只需要改下对应的参数即可
 
总结:代码有可以优化的地方,期待大佬指教。

posted on 2018-01-06 10:47  杨俊飞  阅读(6892)  评论(0编辑  收藏  举报

导航