|
1.Zepto框架的優(yōu)勢 Zepto簡單來說是一個(gè)輕量級(jí)的JS庫,。它的優(yōu)勢在于能減少下載和與運(yùn)行時(shí)間，兼容大多數(shù)移動(dòng)瀏覽器和主流桌面現(xiàn)代瀏覽器,。而傳統(tǒng)的js框架,，為了兼容低級(jí)、高級(jí)瀏覽器,，代碼量較大,、運(yùn)行時(shí)間長。移動(dòng)端瀏覽器功能差異較小,，兼容問題不突出,。傳統(tǒng)js框架代碼大，在移動(dòng)端會(huì)造成終端流量加大,、顯示遲緩的情況,。zepto還實(shí)現(xiàn)了jQuery的大部分功能，其功能也是十分強(qiáng)大的,。 2.解析思路 聯(lián)想到平時(shí)在玩游戲的時(shí)候彈出的一些寶箱,，其打開過程無非就是單擊寶箱的時(shí)候,，寶箱搖晃。搖晃動(dòng)畫結(jié)束后,，寶箱打開,，出現(xiàn)獲得的獎(jiǎng)勵(lì)。分析制作開啟寶箱的實(shí)現(xiàn)細(xì)節(jié) （1）使用 addClass 方法給寶箱添加相應(yīng)的搖晃類,； （2）使用 setTimeout,、removeClass、closest,、find,、addClass 等方法讓原來的寶箱變?yōu)榇蜷_狀態(tài)，并顯示獎(jiǎng)勵(lì)模塊,，寶箱下面的文字在寶箱打開后消失,。 Zepto的部分方法和事件如下： 
圖2.1 zepto方法和事件 3.制作過程 需要制作的是如下圖3.1效果的寶箱開啟圖： 
（1）首先當(dāng)然是引入zepto.min.js文件。 （可以通過訪問github地址： https://github.com/madrobby/zepto下載到所需要的文件） <script type="text/javascript" src="js/zepto.min.js"></script> |
（2）利用h5實(shí)現(xiàn)百寶箱的的基礎(chǔ)布局,，再添加css樣式進(jìn)行調(diào)整,。 <body ontouchstart=""> <div> <div class="bg rotate"></div> <div class="open-has "> <h3><span>四川旅游學(xué)院</span>送你一個(gè)寶箱</h3> <h3>恭喜你，</br>成功領(lǐng)取<span></span>旅游百寶箱</h3> <div> <div class="chest-close show "> <div></div> <div> <i></i> </div> </div> <div class="chest-open "> <div class="mod-chest-cont open-cont"> <div> <div> <div><img src="img/chest-icon-zuan.png"></div> x 500 </div> <div> <button>查看詳情并提取</button> </div> </div> </div> </div> </div> </div> <div style="display:none"> <h3>恭喜你,，中獎(jiǎng)了</h3> <div> <div class="chest-open show"></div> </div> <div> <button>查看領(lǐng)取詳情</button> </div> </div> </div> </body> |
（3）利用動(dòng)畫效果和css實(shí)現(xiàn)背景光環(huán)的閃耀,、寶箱左右搖擺后開啟等動(dòng)畫效果。@keyframes里設(shè)置transform:rotate();控制動(dòng)畫暫停和運(yùn)動(dòng)可以用屬性:animation-play-state:paused(暫停),、running(運(yùn)動(dòng)),。transform:shake實(shí)現(xiàn)動(dòng)畫的擺動(dòng)，transform: move實(shí)現(xiàn)動(dòng)畫的移動(dòng),。（代碼過多,，部分代碼已刪減） @-webkit-keyframes rotate { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-webkit-keyframes move { 0% { -webkit-transform:translate(0px ,0px); } 100% { -webkit-transform:translate(0px ,-5px); } } @-webkit-keyframes shake { 0% { transform: scale(1); -webkit-transform: scale3d(1, 1, 1); } 6%{ -webkit-transform: scale(.9) rotate(-8deg); -webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg); } 18%, 30%,42%{ -webkit-transform: scale(1.1) rotate(8deg); -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg); } 12%,24%, 36%,48%{ -webkit-transform: scale(1.1) rotate(-8deg); -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg); } 90% { -webkit-transform: scale(1) translate(0px,130px); -webkit-transform: scale3d(1, 1, 1) translate3d(0px,130px,0); } 100% { -webkit-transform: scale(1) translate(0px,150px); -webkit-transform: scale3d(1, 1, 1) translate3d(0px,150px,0); } } |
（4）添加js代碼實(shí)現(xiàn)最后的效果。 $(".chest-close").click(function(){ $(this).addClass("shake"); var that=this; this.addEventListener("webkitAnimationEnd", function(){ $(that).closest(".open-has").addClass("opened"); setTimeout(function(){ $(that).removeClass("show"); $(that).closest(".mod-chest").find(".chest-open").addClass("show"); setTimeout(function(){ $(".chest-open").addClass("blur"); },500) },200) }, false); }) |
編 輯 | 王楠嵐 責(zé) 編 | 劉 連
|
