<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>翻牌抽奖游戏</title>
<link rel="stylesheet" type="text/css" href="css/lottery.css">
<script>
//这里以750px的设计稿进行rem计算，基数是40px，那么假如100px/40px=2.5rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div class="lottery-con" id="lottery">
<div class="lottery-header">
翻牌抽奖游戏
</div><!--lottery-header 头部 -->
<div class="lottery-body clearfix">
<div class="lottery-tool">
<div class="lottery-thead">
您可以翻牌{{ flopNum }}次
</div>
<div class="lottery-tbody">
<div class="lottery-tb-inner" :class="flopDisable.shuffle">
<!-- 纸牌列表 -->
<ul class="lottery-tb-list">
<li v-for="(el,index) in newPrizeList">
<!-- 纸牌操作 -->
<div class="lottery-playing-cards viewport-flip" :data-index="index">
<div class="lottery-flip-card lottery-positive flip">
<i :class="el.class" v-html="el.text"></i>
<span class="lottery-tit">{{ el.title }}</span>
<span class="lottery-see">{{ el.describe }}</span>
</div>
<div class="lottery-flip-card lottery-reverse flip out"></div>
</div>
</li>
</ul>
<!-- 翻牌按钮 -->
<div class="lottery-tb-btn" id="flopBtn">{{ flopBtnText }}</div>
<!--透明遮罩层用于遮挡操作-->
<div class="lottery-mask" :style="{ 'display' : flopDisable.mask }"></div>
</div>
</div>
</div><!--lottery-tool-->
</div><!--lottery-body 内容部分-->
<div class="lottery-msg">{{ lotteryMsg }}</div>
</div><!--lottery-->
<script src="js/zepto.min.js"></script>
<script src="js/vue.min.2.x.js"></script>
<script>
/**
* 如果是 Vue 1.x 版本只要修改
* html 中的 (el,index) 改成 el
* index 改成 $index
*/
var vm = new Vue({
el:'#lottery',
data:{
lotteryMsg:'', //信息提示
//默认奖品列表
defaultPrizeList : [
//加息卷0.5% 2小时
{
class : 'lottery-card-volume lottery-cv1',
title : '0.5%加息券' ,
text :'<em>0.5%</em>',
describe : '可在加息券中查看'
},
//谢谢参与
{
class : 'lottery-thank-you',
title : '谢谢参与' ,
text : '',
describe : ''
},
//加息卷1% 2小时
{
class : 'lottery-card-volume lottery-cv1',
title : '1.0%加息券' ,
text :'<em>1.0%</em>',
describe : '可在加息券中查看'
},
//88888体验金 2小时
{
class : 'lottery-experience-gold',
title : '88888体验金' ,
text : '',
describe : '可在体验金中查看'
},
//加息卷2% 2小时
{
class : 'lottery-card-volume lottery-cv1',
title : '2.0%加息券' ,
text : '<em>2.0%</em>',
describe : '可在加息券中查看'
},
//100万体验金 2小时
{
class : 'lottery-experience-gold',
title : '100万体验金' ,
text : '',
describe : '可在体验金中查看'
},
//加息卷5% 2小时
{
class : 'lottery-card-volume lottery-cv1',
title : '5.0%加息券' ,
text : '<em>5.0%</em>',
describe : '可在加息券中查看'
},
//8888体验金 2小时
{
class : 'lottery-experience-gold',
title : '8888体验金' ,
text : '',
describe : '可在体验金中查看'
}
] ,
newPrizeList : [],//新的奖品数据
flopNum : 3 ,//剩余抽奖次数
flopDisable : {
shuffle : '', //洗牌
mask : '' //遮罩
} , //禁止操作纸牌及按钮开关
flopBtnText : '翻牌', //按钮状态
clickIndex : null //被点击的索引
},
created () {
var _self = this;
Vue.nextTick(function(){
_self.initEvent()
})
} ,
methods : {
initEvent (){
var _self = this;
//翻牌按钮，按下抬起效果
$('#flopBtn').on('touchstart',function(){
$(this).addClass('lottery-tb-btn-d')
}).on('touchend',function(){
$(this).removeClass('lottery-tb-btn-d')
})
//让不支持CSS3 animation的浏览器向下兼容效果
var BROWSER = function() {
var ua = navigator.userAgent.toLowerCase();
var match = /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version)?[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
!/compatible/.test( ua ) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec( ua ) ||
[];
return { browser: match[1] || "", version: match[2] || "0" };
}();
if ((BROWSER.animate = (BROWSER.browser !== "mozilla" && BROWSER.browser !== "webkit"))) {
// 不是目标浏览器，创建CSS向下兼容
var oStyle = document.createElement("style"), cssText = ".out{display:none!important;}";
oStyle.type = "text/css";
if (BROWSER.browser === "msie") {
oStyle.styleSheet.cssText = cssText;
} else {
oStyle.innerHTML = cssText;
}
document.getElementsByTagName("head")[0].appendChild(oStyle);
}
/**
* 数组对象的深拷贝
* @param source 数组对象
*/
var objDeepCopy = function (source) {
var sourceCopy = source instanceof Array ? [] : {};
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
}
【前端素材】小游戏-翻牌抽奖小游戏.zip （12个子文件） 
翻牌抽奖小游戏 js 
vue.min.2.x.js 74KB vue.min.1.x.js 75KB zepto.min.js 26KB res 
preview.png 86KB qr_code.png 2KB css lottery.css 10KB
index.html 15KB images card_volume.png 3KB red_packet.png 6KB reverse.png 7KB flip_button.png 14KB thankYou.png 14KB资源评论
