最近做的活动页面,记录下:
负责了两块的活动效果:翻牌和开宝箱;
翻牌部分的要点:
翻牌关键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); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。