在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

圖片描述

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

回答
編輯回答
陌如玉

寫過一個(gè)類似的,github地址
demo地址

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

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

2018年6月30日 12:18