这周实现了一个h5+css3动画效果的招聘网页,总结一下技术难点。
本次使用zepto+swiper+animate实现的。
- zepto.js
实现移动端上下滑动切屏效果的插件; - zepto.fullpage.js
$.fn.fullpage.moveTo(num); //实现锚点定位到第几屏
- swiper.js 插件
可实现移动端上下滑动和左右滑动效果,但在添加animate动画时会出现错乱,动画只支持其中一种滚动里的,以后再研究。 - 页面内的锚点定位
其中同时使用了上下滑动和左右滑动,上下滑动使用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;
动画效果