最近做的活动页面,记录下:
负责了两块的活动效果:翻牌和开宝箱;
翻牌部分的要点:
翻牌关键css
父级元素设置3D视角:
-webkit-perspective: 1000;
perspective: 1000;
CSS @keyframes 规定动画(各种浏览器记得加前缀):
@keyframes flipintoleft {
from { transform: rotateY(-90deg) scale(.9); }
to { transform: rotateY(0); }
}
使用:
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
backface-visibility: hidden;
transform: translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
翻牌html
<div class="viewport-flip">
<a href="#" class="flip out"><img src="images-back.jpg" alt="背面"></a>
<a href="#" class="flip"><img src="images.jpg" alt="正面"></a>
</div>
翻牌js
通过js来切换样式达到动画效果
if ($(this).hasClass("out")) {
eleBack = $(this);
} else {
eleFront = $(this);
}
开宝箱要点
定位图片中的各个数字Y坐标
var step = (imgH/10).toFixed(2),
posArr = [];
//数字位置
for(var i=0;i<=9;i++){
posArr[i] = step*i;
}
生产三个随机数,根据随机数计算图片Y坐标,滚动到位置
n1 = Math.round(Math.random()*9);
...
finPos_1 = posArr[n1]
...
$("#mation-1").animate({"top":"-"+finPos_1+"px"},1000);
...
$("#mation-1").attr("date-num",n1);
播放音乐
<audio id="openAudio" src="slot.mp3" preload="preload"></audio>
document.getElementById("openAudio").play();
手指滑动
用了插件
jquery.touchSwipe.min.js
$("#mation-1,#mation-2,#mation-3").swipe({
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
slotSwipe($(this),direction);
},
threshold:2
});
//手指滑动方向函数
var slotSwipe =function(obj,dir){
var dNum =parseInt(obj.attr("date-num"));
if(dir == "down"){
dNum--;
if(dNum < 0){
return false;
}
}else if(dir == "up"){
dNum++;
if(dNum > 9){
return false;
}
}
obj.attr("date-num",dNum);
obj.animate({"top":"-"+posArr[dNum]+"px"},100);
}