前期准备
swiper
swiperAnimate插件
swiperAnimate配置文件js手写
布局rem
velocity.js
jquery.touchy.min.js
jquery-2.1.4.min.js
注意事项
- UC浏览器实际的视框<1000px的高度(设计稿就要保证在安全范围)
- 华为手机 X5内核手机的控制
- 正式地址不要开始就使用,应该空下来
var l = new Swiper($(".swiper-container-main"), {
direction: "vertical",
speed: 500,
grabCursor: !0,
autoplay: !1,
loop: !1,//是否循环
noSwiping: !0,//是否能滑动
initialSlide: 0,//初始是第几页
onInit: function(t) {
n.init(swiperAnimateParam_main, t),
n.play()
},
- ps cc中已经有功能为复制css,但是要注意先合并图层
- 加到头信息中
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<!-- 强制竖屏-->
<meta name="screen-orientation" content="portrait">
<meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application">
<meta name="HandheldFriendly" content="true">
<meta name="msapplication-tap-highlight" content="no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- sass文件中,将px转成rem
@function pxTorem($px){ @return $px / 32 * 1rem; }
css3 animation 中如果写both则不会回到初始
onSlideChangeEnd: function(t),中执行一些滚到当前页的函数
t.activeIndex表示当前页,如果是第二页,则if( t.activeIndex ==2)通过添加和删除类可以实现自己的css3动画的加载和删除