1.Zepto框架的优势
Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间，兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架，为了兼容低级、高级浏览器，代码量较大、运行时间长。移动端浏览器功能差异较小，兼容问题不突出。传统js框架代码大，在移动端会造成终端流量加大、显示迟缓的情况。zepto还实现了jQuery的大部分功能，其功能也是十分强大的。
2.解析思路
联想到平时在玩游戏的时候弹出的一些宝箱，其打开过程无非就是单击宝箱的时候，宝箱摇晃。摇晃动画结束后，宝箱打开，出现获得的奖励。分析制作开启宝箱的实现细节
（1）使用 addClass 方法给宝箱添加相应的摇晃类；
（2）使用 setTimeout、removeClass、closest、find、addClass 等方法让原来的宝箱变为打开状态，并显示奖励模块，宝箱下面的文字在宝箱打开后消失。
Zepto的部分方法和事件如下：
图2.1 zepto方法和事件
3.制作过程
需要制作的是如下图3.1效果的宝箱开启图：
（1）首先当然是引入zepto.min.js文件。
（可以通过访问github地址：
https://github.com/madrobby/zepto下载到所需要的文件）
<script type="text/javascript" src="js/zepto.min.js"></script> |
（2）利用h5实现百宝箱的的基础布局，再添加css样式进行调整。
<body ontouchstart=""> <div> <div class="bg rotate"></div> <div class="open-has "> <h3><span>四川旅游学院</span>送你一个宝箱</h3> <h3>恭喜你，</br>成功领取<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>恭喜你，中奖了</h3> <div> <div class="chest-open show"></div> </div> <div> <button>查看领取详情</button> </div> </div> </div> </body> |
（3）利用动画效果和css实现背景光环的闪耀、宝箱左右摇摆后开启等动画效果。@keyframes里设置transform:rotate();控制动画暂停和运动可以用属性:animation-play-state:paused(暂停)、running(运动)。transform:shake实现动画的摆动，transform: move实现动画的移动。（代码过多，部分代码已删减）
@-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代码实现最后的效果。
$(".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); }) |
