零基础学做网站培训介绍

当前位置:

JS实现网站点击加载更多翻页功能

我们通常在做网站时,如果一个栏目下的内容过多,我们会使用分页功能来将内容进行分页展示。如下图:

常见的分页展示效果

今天我们介绍一下除了分页之外,我们展示的另一种方法,就是点击加载更多功能。如下图:

点击加载更多展示效果

如何自己做网站时,将自己的网站内容使用这种加载更多功能呢?下面是实现网站点击加载更多功能方法。

方法/步骤

  1. 首先将自己的栏目的列表代码,使用<div class="wzcon">这个DIV包裹;示例代码:
    
    
    <div class="wzcon">
    <div class="hidden">
    <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
    <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
    <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
    <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
    <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
    <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
    </div>
    <ul class="list">数据加载中,请稍后...</ul>
    <div class="more"><a href="javascript:;" onClick="wzcon.loadMore();">加载更多</a></div>
    </div>
  2. 将以下的CSS样式放到自己网站的CSS样式表里,操作样式;
    
    
    .hidden{ display: none;}
    .wzcon{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
    .wzcon ul.list{overflow: hidden;}
    .wzcon ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
    .wzcon ul.list li img{width: 100%;height: 100%;}
    .wzcon ul.list p{text-align: center;padding: 10px;}
    .wzcon .more{overflow: hidden;padding:10px;text-align: center;}
    .wzcon .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
    .wzcon .more a:hover{text-decoration: none;background: red;color: #fff;}
  3. 最后引入点击加载更多功能实现的必需的JS代码,直接放在</body>标签上方即可!
    
    
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    var _content = []; //临时存储li循环内容
    var wzcon = {
    _default:10, //默认显示图片个数
    _loading:5, //每次点击按钮后加载的个数
    init:function(){
    var lis = $(".wzcon .hidden li");
    $(".wzcon ul.list").html("");
    for(var n=0;n<wzcon._default;n++){
    lis.eq(n).appendTo(".wzcon ul.list");
    }
    $(".wzcon ul.list img").each(function(){
    $(this).attr('src',$(this).attr('realSrc'));
    })
    for(var i=wzcon._default;i<lis.length;i++){
    _content.push(lis.eq(i));
    }
    $(".wzcon .hidden").html("");
    },
    loadMore:function(){
    var mLis = $(".wzcon ul.list li").length;
    for(var i =0;i<wzcon._loading;i++){
    var target = _content.shift();
    if(!target){
    $('.wzcon .more').html("<p>全部加载完毕...</p>");
    break;
    }
    $(".wzcon ul.list").append(target);
    $(".wzcon ul.list img").eq(mLis+i).each(function(){
    $(this).attr('src',$(this).attr('realSrc'));
    });
    }
    }
    }
    wzcon.init();
    </script>
  4. 这样,就可以实现点击加载更多功能效果了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 在学做网站论坛前面的教程:wordpress制作符合Bootstrap的导航栏菜单(带二级菜单),我们可以制作出带有二级下拉菜单的导航。但是有的建网站学员在制
  • 对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。
  • 在学做网站论坛之前的建站教程中,介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载特别有用,可以加速网页打开速
  • 现在很多学员自己建网站,通过投放百度联盟广告赚钱。通过是将百度联盟广告的代码直接放在要显示的位置,但这会造成整个网页打开速度减慢。今
  • 我们通常在做网站时,如果一个栏目下的内容过多,我们会使用分页功能来将内容进行分页展示。如下图:今天我们介绍一下除了分页之外,我们展示
  • 手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。手机网站除了使用这
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工