鍍金池/ 問(wèn)答/HTML5  HTML/ 移動(dòng)端上滑翻頁(yè)效果如何實(shí)現(xiàn)

移動(dòng)端上滑翻頁(yè)效果如何實(shí)現(xiàn)

圖片描述

首先，如圖底部所示，三個(gè)向上的箭頭會(huì)是一閃一閃的效果，滑動(dòng)可以進(jìn)行翻頁(yè)；
要求：
1.頁(yè)面是占滿整屏的，背景始終不變，只是背景上的內(nèi)容很長(zhǎng)，會(huì)超出屏幕；
2.滑動(dòng)的時(shí)候就翻至下一頁(yè)，類似于fullPage插件的效果；
怎樣用jQuery實(shí)現(xiàn)這樣的效果，包括布局應(yīng)該怎么布局？
希望大神給指導(dǎo)一下，沒(méi)有思路。

回答
編輯回答
陌如玉

寫過(guò)一個(gè)類似的，github地址
demo地址

2018年1月26日 22:59
編輯回答
老梗

這個(gè)用jQ和zepto都行，除此以外再準(zhǔn)備套簡(jiǎn)單的動(dòng)畫（滑動(dòng)即可）和手勢(shì)方案。
背景如果是固定的就寫到body上，每頁(yè)內(nèi)容撐滿頁(yè)面，布局按設(shè)計(jì)稿來(lái)做下適配（可以用最簡(jiǎn)單的縮放，頁(yè)面初始化時(shí)拿innerWidth或者innerHeight和設(shè)計(jì)稿寬或高算下比例，然后在每個(gè).page上寫個(gè)scale就好）。另外根據(jù)交互設(shè)計(jì)，上下頁(yè)面是首尾相接的就用相對(duì)定位，如果是層疊的就用絕對(duì)定位。另外提前想好怎么獲得當(dāng)前頁(yè)和下一頁(yè)，上滑時(shí)需要把當(dāng)前頁(yè)往上挪一屏的距離（動(dòng)畫），然后下一頁(yè)就變成了當(dāng)前頁(yè)。
如果覺(jué)得太麻煩的話，也可以用現(xiàn)成的東西，不一定是jQ的，github上一搜一把。把圖切出來(lái)頁(yè)面碼好，簡(jiǎn)單js配置下，再弄下loading和分享就搞定了。

2018年6月30日 12:18