前言：
現(xiàn)在微信的鏈接頁面五花八門，各有千秋，今天介紹一個(gè)視覺效果蠻贊的廣告做法。主要是依賴zepto.fullpage插件，可實(shí)現(xiàn)移動(dòng)端的單頁滾動(dòng)效果，可自定義參數(shù)，提供回調(diào)接口，和公開接口。
效果展示
演示地址：http://cdn.moji.com/html5/winter/sd/index.html
0.png
1.png
2.png
3.png
移動(dòng)端項(xiàng)目適配
在使用移動(dòng)端開發(fā)的時(shí)候，必然要做幾步，下面簡(jiǎn)單的介紹下移動(dòng)端開發(fā)的前期準(zhǔn)備工作；
A.適配，阻止放大的事件，以及比例為1不變；
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
B.寬度、高度、字體大小均采用rem單位
html{
font-size:62.5%;//一般都采用62.5%，有的喜歡0.625%，轉(zhuǎn)換成px則為10px
}
C.采用響應(yīng)式布局，適應(yīng)每一種寬度的移動(dòng)設(shè)備（媒體查詢功能）
//最大寬度為479px
@media (max-width: 479px){
.box{
background:yellow;
}
}
//最大寬度為679px，最小寬度為480px
@media (min-width: 480px) and (max-width:679px){
.box{
background:green;
}
}
//最小寬度為679px
@media (min-width: 679px){
.box{
background:black;
}
}
Ｄ.到GitHub下載JS文件，并且引入到文件內(nèi)。
https://github.com/yanhaijing/zepto.fullpage
完成以上三步之后，就可以開始使用zepto.fullpage
zepto.fullpage
下面簡(jiǎn)單的看一下最簡(jiǎn)單的demo
html:
<div class="wp">
<div class="wp-inner">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
</div>
</div>
css:
.wp{
overflow: hidden;
}
css:
$('.wp-inner').fullpage();
就可以實(shí)現(xiàn)簡(jiǎn)單的整屏切換
進(jìn)階實(shí)現(xiàn)
稍微打開控制臺(tái)不難發(fā)現(xiàn)，當(dāng)切換到某一個(gè)頁面的時(shí)候，會(huì)在該div內(nèi)添加了.cur的類名
所以可以通過CSS3的動(dòng)畫來進(jìn)行控制，頁面的動(dòng)畫。
//類似于這樣的方法，就可以進(jìn)行頁面到達(dá)的時(shí)候，進(jìn)行動(dòng)畫效果
//cur的類只會(huì)在到達(dá)的頁面才會(huì)添加，其他頁面則會(huì)沒有cur屬性，當(dāng)切換后，cur屬性會(huì)跑到相應(yīng)的頁面上
.cur .wen{
position:absolute;
opacity:0;
height:.65rem;
width:.65rem;
right:.4rem;
top:2.3rem;
animation:wengo 2s 2s forwards;
}
