SOURCE

//摇奖
var total = 5;//奖项个数
var $btnYao = $(".btn-yao");
var $btnBs = $(".btn-bs");
var flag = true;//控制是否可以摇奖
var arrPos = [0,0,0];//存放当前位置
var arrNum = [0,0,0];//存放随机数
var step = 3060;//控制转的步数
var tempArr;
var result;//抽奖结果

//产生随机数
function getNumb(n){
    var num = new Array();
    var val;
    for(var i = 0; i < 3; i++){
        val =  Math.floor(Math.random() * n);
        num[num.length] = val;
    }
    return num;
}

$btnYao.on("click",function(){
	if(flag == true){
		flag=false;
		$btnBs.addClass("active");	
		$btnBs.on("webkitAnimationEnd",function(){
		   $btnBs.removeClass("active");
            $(this).off("webkitAnimationEnd");
		});
        tempArr = arrNum;
        arrNum = getNumb(total);
        $(".prize li").each(function(i){
            arrPos[i] += -step-((arrNum[i]-tempArr[i])<=0?(arrNum[i]-tempArr[i]+total):(arrNum[i]-tempArr[i]))*102;
            $(this).css("background-position-y",arrPos[i] +"px");
        });
        $(".prize li").eq(2).on("webkitTransitionEnd",function(){
            flag = true;//摇奖结束重置开关
            $(this).off("webkitTransitionEnd");
			//中奖结果处理
			result = arrNum.join("");
			console.log(result);
			if(/0{3}/.test(result)){
				alert("恭喜中了特等奖");	
			}else if(/1{3}|2{3}|3{3}|4{3}/.test(result)){
				alert("恭喜中了一等奖");	
			}else if(/0\d?0/.test(result)){
				alert("恭喜中了二等奖");	
			}else if(/1\d?1|2\d?2|3\d?3|4\d?4/.test(result)){
				alert("恭喜中了三等奖");	
			}else{
				alert("很遗憾没有中奖！");	
				}
        });
	}

})

<script src="http://mykd.99.com/script/plugin/zepto.min.js?v=1"></script>
<div class="mod-sub">
    <span class="btn-bs"></span>
    <ul class="prize">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!--按钮不可点击时，添加类名“btn-dis”变为灰色-->
    <a href="javascript:;" class="btn-yao" title="我要摇"></a>
</div>

*{ margin:0; padding:0; list-style:none}
.mod-sub{ background:url(http://img1.91huo.cn/mykd/img/tmp/0420/bg-sub.jpg) no-repeat; width:720px; min-height:900px; position:relative; transform:scale(0.4); transform-origin:0 0}
.btn-bs{ width:30px; height:117px; background:url(http://img1.91huo.cn/mykd/img/tmp/0420/bs.png) no-repeat; position:absolute; left:656px; top:480px; transform-origin: center bottom; }
.btn-bs.active{animation:btnBs ease-in 0.3s 2 alternate forwards; }
@keyframes btnBs{
    0%{ transform:scaleY(1)}	
	100%{ transform:scaleY(-0.5)}
}

.prize li{ width:96px; height:102px; background-image:url(http://img1.91huo.cn/mykd/img/tmp/0420/icon-prize.png); background-repeat:repeat; position:absolute; top:529px; transition: all 3s 0.5s ease-out}
.prize li:nth-of-type(1){ left:160px }
.prize li:nth-of-type(2){ left:319px; transition-delay: 0.6s }
.prize li:nth-of-type(3){ left:480px; transition-delay: 0.7s}


.btn-yao,.btn-dis{ width:470px; height:145px; background:url(http://img1.91huo.cn/mykd/img/tmp/0420/btn-yao.png) no-repeat; position:absolute; left:50%; margin-left:-235px; top:690px}
.btn-dis{ background-position:0 -145px}