<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>翻牌抽奖</title>
<style>
body {background: #E7244B;}
*{margin:0;padding:0}a img{border:0}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align: center;}
.top {width: 100%;}
.weui-grid {padding: 0;}
.weui-grid:before {border: 0;}
.weui-grid:after {border: 0;}
.weui-grids:before {border: 0;}
.img {width: 90%;margin-top: 1vw;height: 33.9vw}
.info {display: none;margin-top: 1vw;width: 0;height: 33.9vw;}
.shelter {opacity: 0.5;filter: alpha(opacity=50);}
.bottom {width: 100%;}
.weui-grids{position:relative;overflow:hidden}
.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box}
.weui-grid:active{background-color:#ececec}
.weui-grid__icon{width:28px;height:28px;margin:0 auto}
.weui-grid__icon img{display:block;width:100%;height:100%}
.weui-dialog{position:fixed;z-index:5000;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fff;text-align:center;border-radius:3px;overflow:hidden}
.weui-dialog__hd{padding:1.3em 1.6em .5em}
.weui-dialog__title{font-weight:400;font-size:18px}
.weui-dialog__bd{padding:0 1.6em .8em;min-height:40px;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999}
.weui-dialog__bd:first-child{padding:2.7em 20px 1.7em;color:#353535}
.weui-dialog__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}
.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}
.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}
.weui-dialog__btn:active{background-color:#eee}
.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}
.weui-dialog__btn:first-child:after{display:none}
.weui-dialog__btn_default{color:#353535}
.weui-dialog__btn_primary{color:#0bb20c}
</style>
</head>
<body>
<img class="top" src="Picture/top.jpg" alt="">
<div style="width:100%; height:10vw; line-height:6vw; text-align:center;"><span style="color:#fff; font-size:4vw;">您共有 1 次翻牌机会</span></div>
<div class="weui-grids" id="draw">
<a href="javascript:;" id="a1" class="weui-grid">
<img class="img" src="Picture/2.png" alt="">
<img class="info" src="Picture/1.png" alt="">
</a>
<a href="javascript:;" id="a2" class="weui-grid">
<img class="img" src="Picture/6.png" alt="">
<img class="info" src="Picture/5.png" alt="">
</a>
<a href="javascript:;" id="a3" class="weui-grid">
<img class="img" src="Picture/7.png" alt="">
<img class="info" src="Picture/3.png" alt="">
</a>
<a href="javascript:;" id="a4" class="weui-grid">
<img class="img" src="Picture/9.png" alt="">
<img class="info" src="Picture/4.png" alt="">
</a>
<a href="javascript:;" id="a5" class="weui-grid">
<img class="img" src="Picture/6.png" alt="">
<img class="info" src="Picture/5.png" alt="">
</a>
<a href="javascript:;" id="a6" class="weui-grid">
<img class="img" src="Picture/2.png" alt="">
<img class="info" src="Picture/8.png" alt="">
</a>
<a href="javascript:;" id="a7" class="weui-grid">
<img class="img" src="Picture/7.png" alt="">
<img class="info" src="Picture/1.png" alt="">
</a>
<a href="javascript:;" id="a8" class="weui-grid">
<img class="img" src="Picture/6.png" alt="">
<img class="info" src="Picture/5.png" alt="">
</a>
<a href="javascript:;" id="a9" class="weui-grid">
<img class="img" src="Picture/9.png" alt="">
<img class="info" src="Picture/4.png" alt="">
</a>
</div>
<img class="bottom" src="Picture/bottom.png" />
<div class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">恭喜您中奖啦</strong></div>
<div class="weui-dialog__bd">恭喜您获得了一个<span id="hb"></span>元的现金红包，您可在"会员中心"-"余额"查阅</div>
<div class="weui-dialog__ft">
<a href="javascript:;" onclick="TurnMyCenter()" class="weui-dialog__btn weui-dialog__btn_default">去查看</a>
<a href="javascript:;" onclick="Refresh()" class="weui-dialog__btn weui-dialog__btn_primary">再翻一次</a>
</div>
</div>
</div>
<div class="js_dialog" id="iosDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">很遗憾，您没有中奖</strong></div>
<div class="weui-dialog__bd">不要气馁，您可以再翻一次</div>
<div class="weui-dialog__ft">
<a href="javascript:;" onclick="ClosePage()" class="weui-dialog__btn weui-dialog__btn_default">关闭</a>
<a href="javascript:;" onclick="Refresh()" class="weui-dialog__btn weui-dialog__btn_primary">再翻一次</a>
</div>
</div>
</div>
<br />
<br />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script>
var clickstate = 0;
var turn = function (target, time, opts) {
console.log(111)
target.find('a').click(function () {
if (clickstate == 1) {
return;
}
var current = $(this);
// stop() 方法停止当前正在运行的动画。
$(this).find('.img').stop().animate(opts[0], time, function () {
// next() 获得匹配元素集合中每个元素紧邻的同胞元素
$(this).hide().next().show();
$(this).next().animate(opts[1], time);
setTimeout(function () {
// siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
$('#' + current[0].id).siblings('a').find('.info').addClass('shelter');
$('#' + current[0].id).siblings('a').find('.img').stop().animate(opts[0], time, function () {
$(this).hide().next().show();
$(this).next().animate(opts[1], time);
});
}, 1000);
clickstate = 1;
// 显示弹框
setTimeout(function () {
if ($('#hb').html() != "10") {
$('#iosDialog1').show();
} else {
$('#iosDialog2').show();
}
}, 3000);
});
});
}
var verticalOpts = [{ 'width': 0 }, { 'width': '90%' }];
turn($('#draw'), 1000, verticalOpts);
function ClosePage() {
$('#iosDialog1').hide();
}
function Refresh() {
$('#iosDialog1').hide();
clickstate = 0;
}
function TurnMyCenter() {
$('#iosDialog1').hide();
}
</script>
</body>
</html>
来源：CSDN
作者：HXH_csdn
链接：https://blog.csdn.net/HXH_csdn/article/details/103687216