标签：
项目中，在充值流程中，加入了1个抽奖环节，需要转盘显示抽中的虚拟货币。网上找了相关的特效，最后锁定在这个特效上：http://www.jb51.net/jiaoben/319636.html。因为用的是jquery实现的，项目中有引入jquery，不用添加新的js库就很方便的实现。
整个流程是：用户支付完成后，后台随机产生抽中的数字，传到转盘页面。转盘页面只是负责动态的显示后台产生的数字（而不是页面产生随机数）。那好，前端的工作就变成了接收一个数字，我们这里假定是三位的，两位的数字后端传过来的时候百位上就补零了，如：85补成085；前端负责动态的显示085就醒了。
UI效果图：
修改下下来的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>充值抽奖</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../assets/css/amazeui.min.css?v=1.0">
<link rel="stylesheet" href="../../assets/css/style1.css?v=1.0">
<link rel="stylesheet" href="../../assets/css/index.css?v=1.0">
<style>
input, button, select, textarea, a:fouse {outline:none}
li {list-style:none;}
img {border:none;}
textarea {resize:none;}
body {margin:0;font: 12px "微软雅黑"; background: #feecd4;}
/* === End CSS Reset ========== */
body{
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<950?"950px":"");
}
a{
text-decoration: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
.container{
width:100%;
margin: 0 auto;
position: relative;
/*height: 198px;*/
}
/* 头部 */
/*.main{
background: url("images/main.jpg") no-repeat center;
background: #feecd4;
height: 351px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}*/
.main2{
margin:0 auto;
background: url("../../assets/images/activities/main2-1.png") no-repeat center;
width:300px;
height:300px;
background-size:300px 300px;
/*最小宽度*/
}
.main3{
/*background: url("images/main3.jpg") no-repeat center;
height: 381px;*/
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}
.main3-text{
color:#744b00;
font-size: 23px;
font-weight: bold;
position: absolute;
left: 74px;
top: 210px;
}
.main3-text2{
color:#744b00;
font-size: 14px;
position: absolute;
left: 74px;
top: 254px;
line-height: 22px;
width: 867px;
}
.main-text{
position: absolute;
left: 360px;
top: 325px;
color:#b03b01;
font-size: 16px;
}
.main2-text1{
position: absolute;
left: 79px;
top: 45px;
color:#ffffff;
font-size: 16px;
}
.main2-text2{
position: absolute;
left: 69px;
top: 67px;
color:#ffffff;
font-size: 23px;
font-weight: bold;
}
.main2-text2 span{
color:#ffff00;
}
.main2-text3{
position: absolute;
left: 69px;
top: 97px;
color:#ffffff;
font-size: 18px;
}
.main2-text4{
position: absolute;
left: 382px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text4 span{
color:#ffe700;
font-weight: bold;
}
.main2-text5{
position: absolute;
left: 665px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text5 span{
color:#ffe700;
font-weight: bold;
}
.num{
position: absolute;
left: 30px;
top: 95px;
width: 72px;
height: 112px;
overflow: hidden;
}
.num-con{
position: relative;
top:-724px;
}
.num-img{
background: url("../../assets/images/activities/num-1.png") no-repeat;
width: 72px;
height: 744px;
margin-bottom: 4px;
}
.num2{
left: 114px;
}
.num3{
left: 198px;
}
.main3-btn{
width: 307px;
height: 95px;
position: absolute;
left: 313px;
top: -290px;
cursor: pointer;
}
</style>
</head>
<body class="bg-home" style="">
</header>
<body>
<section class="activities">
<div class="am-padding-sm text-center font-16 content1" style="padding-top:1.5rem;">
<img style="width:100%;"src="../../assets/images/activities/word-2.png"/>
<div class="font-16 font-bold" style="left:53%;bottom:10%;position:absolute;color:#fff601">200-800</div>
</div>
<!--转盘-->
<div style="margin-top:6%;">
<div class="main2">
<div class="container">
<div class="num num1">
<div class="num-con num-con1">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num2">
<div class="num-con num-con2">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num3">
<div class="num-con num-con3">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
</div>
</div>
<!--点击抽奖按钮-->
<div style="margin:5% auto 0 auto;width:250px;" id="lottery">
<img style="width:100%;" src="../../assets/images/activities/lottery.png"/>
</div>
<!--返回个人中心-->
<div style="margin:5% auto 0 auto;width:250px;" id="lottery">
<img style="width:100%;" src="../../assets/images/activities/personal.png"/>
</div>
<!--蒙版图层-->
<section>
<div id="masking-bg">
</div>
<div id="masking-layer">
<div class="masking-banner" onclick="" style="width:270px;left:50%;top:20%; margin-left:-135px;">
<img class="img-bg" src="../../assets/images/activities/lottery-notice.png"/>
<div class="font-25 font-white" style="top:64%;">X<span id="money">500</span></div>
<div style="width:200px;position:absolute;z-index:2000;bottom:0;left:50%; margin-left:-100px;padding-top:8%;" onclick="window.location.href=‘‘">
<img style = "width:100%;"src="../../assets/images/activities/lixy.png"/>
</div>
<div class="close1" onclick="closeMasking()" style="width:40px;left:230px;top:0;">
<img style="width:100%;" src="../../assets/images/common/X-1.png"/>
</div>
</div>
</div>
</section>
</section>
<script src="../../assets/js/jquery.min.js"></script>
<script>
//设置body高度等于手机屏幕高度
$(".activities").height($(window).height());
</script>
<script type="text/javascript">
$("#lottery").click(function () {
reset();
letGo();
});
var flag=false;
var index=0;
var TextNum1
var TextNum2
var TextNum3
//后台传来的随机的金额，数字字符串格式
var money = "341";
function letGo(){
TextNum1=money[0];
TextNum2=money[1];
TextNum3=money[2];
//位置数组 比如arr[0]就是0所在的位置
var arr= [-724,-798.4,-872.8,-947.2,-1021.6,-1096,-1170.4,-1244.8,-1319.2,-646.3];
//百位
var num1=arr[TextNum1];//在这里随机
var num2=arr[TextNum2];
var num3=arr[TextNum3];
//百位
function do1(){
$(".num-con1").animate({"top":-1140},1500,"linear", function () {
$(this).css("top",0).animate({"top":num1},1500,"linear");
setTimeout(function(){showMasking(money)},2000);
});
}
//十位
function do2(){
$(".num-con2").animate({"top":-1140},1000,"linear", function () {
$(this).css("top",0).animate({"top":num2},1000,"linear");
});
}
//个位
function do3(){
$(".num-con3").animate({"top":-1492},500,"linear", function () {
$(this).css("top",0).animate({"top":num3},500,"linear");
});
}
setTimeout(do3,0);
setTimeout(do2,0);
setTimeout(do1,0);
}
function reset(){
$(".num-con1,.num-con2,.num-con3").css({"top":-724});
}
$(‘#masking-layer‘).height($(window).height());
function showMasking(text){
$(‘#masking-bg‘).css(‘display‘,‘block‘);
$(‘#masking-layer‘).css(‘display‘,‘block‘);
$(‘#money‘).text(text)
}
function closeMasking(){
$(‘#masking-bg‘).css(‘display‘,‘none‘);
$(‘#masking-layer‘).css(‘display‘,‘none‘);
}
</script>
</script>
</body>
</html>
上面的代码并不全，因为引入的3个css里的样式没区出来，相信你已经看懂怎么实现了。
标签：
原文地址：http://www.cnblogs.com/xiaochongchong/p/5577090.html
