README.md

showH5

项目介绍：
这个项目是自己封装,用于搭建的基于手机端应用的微信营销、fullpage、静态展示类H5模板，每一个页面可放多个图片元素产生入场动画，应用于活动推广运营之类。本库为开源库，欢迎fork，提PR。有哪里写得不好的地方，还望大家指出，便于相互交流学习。
CSS动效库引用的是animate.css，该库封装了丰富的动画效果。也可以自己进行扩展封装。
手指滑动事件可以自己通过touchmove封装成上下滑动事件，但是基于此类需求都是建立在快速开发的基础上，所以便使用了zepto的手势库和选择器等方法。
JS库引用了zepto.js和touch模块，用来监听上下左右滑动和点击事件。如果项目中有需要前后端交互事件，也可以直接使用zepto中的ajax方法。

项目demo：链接,也可在浏览器手机调试中查看效果

代码介绍：

1、 首先引入动画类库：

<link type="text/css" rel="stylesheet" href="http://chongqing.sinaimg.cn/images/zyhcqr/css/animate.min.css">

模板的css样式表，也可根据自己需要进行改写:

接下来是zepto库：

<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>

<script src="http://chongqing.sinaimg.cn/20160616_tgxc/img/js/touch.js"></script>

微信JS库可以用来定义分享的配图和title,目前微信浏览器不支持自动播放音乐，使用微信JS方法可hack自动播放：

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
    var audio = document.getElementById('theaudio');
    audio.play();
});

最后是自己封装的方法库：

<script src="showH5.js"></script>

封装了上下滑动翻页方法，首页图片加载方法，音乐播放等方法。

2、 其次编写页面中的html代码：把每一页的图片元素用img标签写入。

<img src="p12.png" class="pos_abs animated p12" data-class="bounceIn" data-delay="1.3s">

每个标签class类有3个，pos_abs表示绝对定位，每一页的每个元素也都是使用绝对定位，定位时可直接使用top,left进行定位方便高效。 animated类表示对需要加入动效的元素进行标记。

p12是自己根据需要用来对img标签进行样式编写，比如top left。

data-class表示动效名称；

data-delay表示进入此页后，延时多久出现该元素

2、

<div class="page page1 animated fadeIn hide">
    <img src="p11.png" class="pos_abs animated p11" data-class="bounceInDown" data-delay="0.3s">
    <img src="p12.png" class="pos_abs animated p12" data-class="bounceIn" data-delay="1.3s">
    <img src="p13.png" class="pos_abs animated p13" data-class="fadeInUp" data-delay="2.3s">
    <div class="pos_abs animated p14_parent" data-class="pulse infinite">
        <img src="p14.png" class="pos_abs animated p14" data-class="fadeInUp" data-delay="3.3s" alt=""> 
    </div>
</div>

以上代码是第一页的所有图片元素，p14类比较特别，是因为该图片元素进入页面后，入场动画执行完毕之后，需要改变成另一种循环动效，就需要用div将其包裹，监听img标签动画执行完毕后，使div添加动画class： showH5.AnimationEnd(".p14");第一个参数是被监听图片元素，需要切换的动画类名为data-class属性，也可以自己写一个动画class。

3、 预先加载图片：showH5.loadImg(); 在手机端如果需要单页禁止滑动，就禁止浏览器默认滑动事件：

document.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

PC端显示居中：

if(showH5.IsPC()){
    document.body.style.margin = "0px auto";
} 

PC端手机模拟器调试，调整不同机型时的resize事件：

window.onresize = function(){
    showH5.viewResize();
}

向上滑动到下一页

$("body").swipeUp(function(){ 
    showH5.next();                
})

向下滑动到上一页

$("body").swipeDown(function(){ 
    showH5.last();                
});

自动播放音乐：

showH5.autoPlayAudio('music3.mp3');

参数为音乐地址。 如果需要为元素绑定点击事件，需用以下绑定方式：

$(".p16").tap(function(){
    //你的事件代码...
})