微信广告页面该如何写？

前言：
　　 现在微信的链接页面五花八门，各有千秋，今天介绍一个视觉效果蛮赞的广告做法。主要是依赖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;
}

配合上开头所讲的响应式布局，就能实现所有移动端的效果，更多的内容，demo请访问：http://cdn.moji.com/html5/winter/sd/index.html

可以在GitHub上面下载有更多的demo以及方法教学，这里就不一一列举了：https://github.com/yanhaijing/zepto.fullpage