前期準(zhǔn)備
swiper
swiperAnimate插件
swiperAnimate配置文件js手寫(xiě)
布局rem
velocity.js
jquery.touchy.min.js
jquery-2.1.4.min.js
注意事項(xiàng)
- UC瀏覽器實(shí)際的視框<1000px的高度(設(shè)計(jì)稿就要保證在安全范圍)
- 華為手機(jī) X5內(nèi)核手機(jī)的控制
- 正式地址不要開(kāi)始就使用臀叙,應(yīng)該空下來(lái)
var l = new Swiper($(".swiper-container-main"), {
direction: "vertical",
speed: 500,
grabCursor: !0,
autoplay: !1,
loop: !1,//是否循環(huán)
noSwiping: !0,//是否能滑動(dòng)
initialSlide: 0,//初始是第幾頁(yè)
onInit: function(t) {
n.init(swiperAnimateParam_main, t),
n.play()
},
- ps cc中已經(jīng)有功能為復(fù)制css成翩,但是要注意先合并圖層
- 加到頭信息中
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<!-- 強(qiáng)制豎屏-->
<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轉(zhuǎn)成rem
@function pxTorem($px){ @return $px / 32 * 1rem; }
css3 animation 中如果寫(xiě)both則不會(huì)回到初始
onSlideChangeEnd: function(t)金矛,中執(zhí)行一些滾到當(dāng)前頁(yè)的函數(shù)
t.activeIndex表示當(dāng)前頁(yè),如果是第二頁(yè)借浊,則if( t.activeIndex ==2)通過(guò)添加和刪除類可以實(shí)現(xiàn)自己的css3動(dòng)畫(huà)的加載和刪除