前言：
现在微信的链接页面五花八门，各有千秋，今天介绍一个视觉效果蛮赞的广告做法。主要是依赖zepto.fullpage插件，可实现移动端的单页滚动效果，可自定义参数，提供回调接口，和公开接口。
效果展示
演示地址：http://cdn.moji.com/html5/winter/sd/index.html
0.png
1.png
2.png
3.png
移动端项目适配
在使用移动端开发的时候，必然要做几步，下面简单的介绍下移动端开发的前期准备工作；
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%，转换成px则为10px
}
C.采用响应式布局，适应每一种宽度的移动设备（媒体查询功能）
//最大宽度为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文件，并且引入到文件内。
https://github.com/yanhaijing/zepto.fullpage
完成以上三步之后，就可以开始使用zepto.fullpage
zepto.fullpage
下面简单的看一下最简单的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();
就可以实现简单的整屏切换
进阶实现
稍微打开控制台不难发现，当切换到某一个页面的时候，会在该div内添加了.cur的类名
所以可以通过CSS3的动画来进行控制，页面的动画。
//类似于这样的方法，就可以进行页面到达的时候，进行动画效果
//cur的类只会在到达的页面才会添加，其他页面则会没有cur属性，当切换后，cur属性会跑到相应的页面上
.cur .wen{
position:absolute;
opacity:0;
height:.65rem;
width:.65rem;
right:.4rem;
top:2.3rem;
animation:wengo 2s 2s forwards;
}
