示例图：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telphone=no, email=no">
<title>抽奖demo</title>
<script type="text/javascript" src="js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<head>
</head>
<style type="text/css">
/* === CSS Reset ========== */
html,body{margin:0;padding:0;overflow:hidden;height: 100%;idth:10%}
/* === End CSS Reset ========== */
body{
}
#box{
width:50%;
height: 100%;
margin:0 auto;
position: relative;
}
.main{
width:100%;
height:100%;
}
.logo{
width: 100%;
height: 300px;
}
.num_box{
height:20%;
width: 100%;
margin:0 auto;
z-index:8;
overflow:hidden;
text-align:center;
position: relative;
border: 1px solid rgba(0,0,0,0.15);
}
.num{
background:url("images/num.png") top center repeat-y;
background-size: 100% 1000%;
width:33%;
height:100%;
float:left;
position: absolute;
z-index:0;
border: 1px solid rgba(0,0,0,0.15);
}
.num1{
left: 0;
}
.num2{
left: 33%;
}
.num3{
left: 66%;
}
.btn{
cursor: pointer;
height: 100px;
margin:0 auto;
width: 100%;
background:lightblue;
font-size:30px;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div id="box">
<div class="logo"></div>
<div class="main">
<div class="num_box">
<div class="num num1"></div>
<div class="num num2"></div>
<div class="num num3"></div>
</div>
<div class="btn">开始抽奖</div>
</div>
</div>
</body>
</html>
<script>
$(".num").css('backgroundPositionY',0);
function numRand() {
var x = 500; //上限
var y = 1; //下限
var rand = 100; //抽奖结果
return rand;
}
var isBegin = false;
$(function(){
var h = document.documentElement.clientHeight || document.body.clientHeight;//获取窗口高度，用于计算每个数字的高度
var u = h*0.2*1; //计算每个数字的实际展示高度(即数字显示区域num的实际高度)(0.2和1分别为num-box、num的高度百分比)
$('.btn').click(function(){
if(isBegin) return false;
isBegin = true;
$(".num").css('backgroundPositionY',0);
var result = numRand();
if(result<10){
var num_arr = [0,0,result]
}else if(result>=10&&result<100){
result = result.toString();
var num_arr = [0,result.substr(0, 1),result.substr(-1)];
}
else{
var num_arr = (result+'').split('');}
$(".num").each(function(index){
var _num = $(this);
setTimeout(function(){
_num.animate({
backgroundPositionY: (u*60) - (u*num_arr[index])
},{
duration: 6000+index*3000,
easing: "easeInOutCirc",
complete: function(){
if(index==2){ isBegin = false;alert(result);}
}
});
}, index * 300);
});
});
});
</script>记得引用两个JS文件：jQuery 和 easing.js
另外需要一个0-9数字图片：另存到本地即可。
