javascript - 剛開始後邊的內容沒有加載,伴隨滑鼠向下滾動,後邊內容逐漸加載的效果如何實現?
漂亮男人
漂亮男人 2017-06-30 09:58:33
0
6
749

剛開始後邊沒有內容,向下滾動後邊的內容逐漸加載進來

漂亮男人
漂亮男人

全部回覆(6)
洪涛

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

這種特效是透過fixed實現的,就是平時那些網站打廣告採用的方法。

阿神

dropload事件

滿天的星座

懶加載方案,主要的作用是降低伺服器負擔
https://www.w3cways.com/1765....

伊谢尔伦

剛剛看見你的題目我以為是下拉加載,下拉加載我一般是使用dropload來實現
後來看見一樓寫的又覺得你可能是需要js特效
一直下拉一直加載再加動畫可以使用fullPage.js實現

ringa_lee

其實就是分頁,可以參考下面兩個:
jquery iscroll上拉下拉載入內容:
http://www.kuitao8.com/201501...
dropload.js:
https://github.com/ximan /drop...

typecho

我在商城的訂單列表頁用到了你說的“加載更多”的效果,用的是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);
}

});

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!