搜索

首页  >  问答  >  正文

javascript - 刚开始后边的内容没有加载,伴随鼠标向下滚动,后边内容逐渐加载的效果如何实现?

刚开始后边没有内容,向下滚动后边的内容逐渐加载进来

漂亮男人漂亮男人2693 天前865

全部回复(6)我来回复

  • PHP中文网

    PHP中文网2017-06-30 10:00:33

    你看是不是Kappa天猫旗舰店的春夏新品的那种特效。https://kappa.tmall.com/view_...

    这种特效是通过fixed实现的,就是平时那些网站打广告采用的方法。

    回复
    0
  • 阿神

    阿神2017-06-30 10:00:33

    dropload事件

    回复
    0
  • 滿天的星座

    滿天的星座2017-06-30 10:00:33

    懒加载方案,主要的作用是降低服务器负担
    https://www.w3cways.com/1765....

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-06-30 10:00:33

    刚刚看见你的题目我以为是下拉加载,下拉加载我一般是使用dropload来实现
    后来看见一楼写的又觉得你可能是需要js特效
    一直下拉一直加载再加动画可以使用fullPage.js实现

    回复
    0
  • ringa_lee

    ringa_lee2017-06-30 10:00:33

    其实就是分页,可以参考下面两个:
    jquery iscroll上拉 下拉加载内容:
    http://www.kuitao8.com/201501...
    dropload.js:
    https://github.com/ximan/drop...

    回复
    0
  • typecho

    typecho2017-06-30 10:00:33

    我在商城的订单列表页用到了你说的“加载更多”的效果,用的是Layui里的“流加载”,效果不错。
    demo:http://www.layui.com/demo/flo...
    flow.load({

    elem: '#LAY_demo2' //流加载容器
    ,isAuto: false    //是否自动加载更多
    ,isLazyimg: true  //图片懒加载
    ,done: function(page, next){ //加载下一页
      //模拟用ajax请求数据
      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 6; i++){
          lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
        }
        next(lis.join(''), page < 6); //假设总页数为 6
      }, 500);
    }

    });

    回复
    0
  • 取消回复