zoukankan      html  css  js  c++  java
  • 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);    // 只需要改下对应的参数即可
     
    总结:代码有可以优化的地方,期待大佬指教。
  • 相关阅读:
    中英文对照 —— 宗教
    十万个为什么 —— 冷知识
    十万个为什么 —— 冷知识
    OpenCV调试利器——Image Watch插件的安装和使用
    matlab 读写其他格式数据文件(excel)
    matlab 读写其他格式数据文件(excel)
    文学创作的艺术手法
    文学创作的艺术手法
    常用cl命令参数解释
    网站的栏目和目录结构规划方法
  • 原文地址:https://www.cnblogs.com/yangjunfei/p/8213591.html
Copyright © 2011-2022 走看看