轮播，滚屏插件

这周实现了一个h5+css3动画效果的招聘网页，总结一下技术难点。

本次使用zepto+swiper+animate实现的。

1. zepto.js
   实现移动端上下滑动切屏效果的插件；
2. zepto.fullpage.js

   $.fn.fullpage.moveTo(num); //实现锚点定位到第几屏

    

3. swiper.js 插件
   可实现移动端上下滑动和左右滑动效果，但在添加animate动画时会出现错乱，动画只支持其中一种滚动里的，以后再研究。
4. 页面内的锚点定位
   其中同时使用了上下滑动和左右滑动，上下滑动使用zepto实现，左右滑动使用swiper实现。其中需要点击zepto中的某个元素，跳转到swiper左右滑动的某一屏，找了很多方法，在这里不赘述，最后的实现方法是：

   $(".c6").click(function() { //点击事件
   	$.fn.fullpage.moveTo(num1);  //先使用zepto.fullage.js的方法跳转到swiper方法所在的page num1
   	swiperV.slideTo(num2);      //再使用swiper方法跳转到该屏所在的num2
   });

    

采用定宽网页加img实现的动画效果，好处是在各个不同尺寸的手机浏览时，图片和布局不会错乱和变形。

<meta name="viewport" content="width=750,target-densitydpi=device-dpi,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />

背景图片采用100%或cover；

页面中的元素使用绝对定位（absolute），能单独浮出来的层单独出来，可以添加相应动画效果；

图片不定义大小，方便图片的替换；

位置定位使用top,right,left,bottom,元素居中使用：

top:0;
right:0;
bottom:0;
left:0;
margin:0 auto;

动画效果

转载于:https://my.oschina.net/u/3052153/blog/1813718