摘要：公司接了一個(gè)當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動(dòng)廣告的項(xiàng)目。其中核心方法是，筆者猜測(cè)方法里應(yīng)該是先取出本里的所有類(lèi)名含有的元素，運(yùn)用的方法取出動(dòng)畫(huà)的三個(gè)屬性值，然后加上以觸發(fā)動(dòng)畫(huà)。

公司接了一個(gè)當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動(dòng)廣告的項(xiàng)目。
網(wǎng)上的模板大部分類(lèi)似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一個(gè)稍微復(fù)雜點(diǎn)的。

研究了一下，采用了swiper.js+animate.css的方案，而swiper.js的官網(wǎng)上正好有Swiper Animate這個(gè)小插件，支持在Swiper內(nèi)快速制作CSS3動(dòng)畫(huà)效果，完美！

研究了一下官網(wǎng)提供的示例（http://www.swiper.com.cn/usag...），其核心是，在slide內(nèi)的元素的類(lèi)名加上"ani"，然后加入幾個(gè)動(dòng)畫(huà)的屬性值，然后提供兩個(gè)方法swiperAnimateCache()和swiperAnimate()，供swiper初始化和頁(yè)數(shù)滑動(dòng)是觸發(fā)動(dòng)畫(huà)。其中核心方法是swiperAnimate()，筆者猜測(cè)方法里應(yīng)該是先取出本slide里的所有類(lèi)名含有"ani"的元素，運(yùn)用jq的data方法取出動(dòng)畫(huà)的三個(gè)屬性值，然后加上以觸發(fā)css3動(dòng)畫(huà)。

由于整個(gè)項(xiàng)目的所有圖片+音樂(lè)加一起總共有6M之大，所以必須要加入loading動(dòng)畫(huà)才行。去github上搜到了imagesloaded這個(gè)庫(kù)，功能很強(qiáng)大，可以監(jiān)測(cè)img標(biāo)簽的載入，也能監(jiān)測(cè)div的背景圖片的載入，用JQ選擇所有的圖片類(lèi)，加入一個(gè)imagesLoaded方法就搞定了。

問(wèn)題出現(xiàn)了，由于之前的swiper類(lèi)是加載完成就直接開(kāi)始播放動(dòng)畫(huà)，所以在loading隱藏后，首頁(yè)的動(dòng)畫(huà)就播放的差不多了，怎么樣讓swiper知道在loading完后再播放動(dòng)畫(huà)呢？

示例中提供的swiperAnimate()的方法中有一個(gè)swiper參數(shù)，console.log出來(lái)后發(fā)現(xiàn)跟swiper實(shí)例本身包含的方法和屬性相似，所以寫(xiě)出代碼

mySwiper.Init = function () {
    swiperAnimate(this); 
};

將動(dòng)畫(huà)播放代碼獨(dú)立成一個(gè)函數(shù)，在初始化時(shí)不執(zhí)行，在loading結(jié)束后執(zhí)行。

這樣寫(xiě)完后發(fā)現(xiàn)動(dòng)畫(huà)還是照舊，然后發(fā)現(xiàn)首次進(jìn)入頁(yè)面，依然會(huì)觸發(fā)一次onSlideChangeEnd事件，所以加入判斷，如果非第一次進(jìn)入第一頁(yè)，且頁(yè)數(shù)不為1時(shí)，觸發(fā)動(dòng)畫(huà)，任務(wù)完成！

多設(shè)備的匹配，一開(kāi)始采用的是flexible方案，這是之前的程序員留給我的方案，我之前沒(méi)有仔細(xì)思考過(guò)實(shí)現(xiàn)，就按照他的方法使用了下來(lái)，后來(lái)發(fā)現(xiàn)在各種設(shè)備上呈現(xiàn)的效果千奇百怪。然后去翻了flexible的文檔，發(fā)現(xiàn)其大概是一種仿vw的實(shí)現(xiàn)方式，就是監(jiān)測(cè)當(dāng)前設(shè)備的寬度，然后除以10，寫(xiě)在body的font-size屬性里，這樣就可以用rem模仿vw使用了。這種匹配方式用在web app里是合適的，里面有合適的文檔流和浮動(dòng)可以很方便的完成效果，對(duì)比例的要求也不高。可是在本項(xiàng)目中，需要適配的是一張張鋪滿全屏的圖片。研究了一會(huì)MDN后，我把所有圖片的background-size屬性改為100% 100%填充滿DIV，然后$(".swiper-container").css({"width": document.body.clientWidth, "height": document.body.clientHeight})將div鋪滿屏幕，后面的定位通過(guò)百分比完成，完成了多設(shè)備的適配工作，這樣做的缺點(diǎn)是在大屏環(huán)境下，如PAD，PC端會(huì)鋪滿窗口，很丑，不過(guò)這次的應(yīng)用場(chǎng)景主要是微信端，還做了微信登錄驗(yàn)證，所以就忽略了。

最后是一個(gè)小bug，swiper雖然鋪滿了屏幕，可是右邊會(huì)留下一條白邊，如果往右拉是能看到白邊的，我通過(guò)hammer.js取消了panleft和panright的動(dòng)作，解決了這一問(wèn)題。

當(dāng)初給自己的時(shí)間是2天，結(jié)果因?yàn)樾枨笞儎?dòng)和各種各樣的原因，整個(gè)項(xiàng)目花了五天時(shí)間才完成并部署上線，中間學(xué)到了很多，特此寫(xiě)下心得，供以后的自己參考。