前端ABC<!DOCTYPE html>
<html>
<head>
<title>Jslottery</title>
<meta charset="utf-8"/>
<style>
.machine{
margin: 0px auto;
width:280px;
}
.prize-cell{
background-color: #cb1573;
width: 64px;
height: 66px;
position: relative;
}
.prize-cell::after{
background:rgba(0,0,0,0.2) none repeat scroll 0% 0%;
content: "";
bottom: 0px;
left: 0;
right: 0;
height: 5px;
position: absolute;
}
.machine-control-cell{
background-color: #278EF2;
}
.machine-control{
width: 92px;
height: 96px;
position: absolute;
margin: -44px 0px 0px 20px;
border-radius: 42%;
border: 1px solid #ff0;
cursor: pointer;
}
.machine-control span{
font-size: 30px;
float: left;
margin: 28px 0px 0px 16px;
}
</style>
</head>
<body>
<div class="machine">
<table class="machine-table">
<tbody>
<tr>
<td class="prize-cell" data-id="1" ></td>
<td class="prize-cell" data-id="2" ></td>
<td class="prize-cell" data-id="3" ></td>
<td class="prize-cell" data-id="4" ></td>
</tr>
<tr>
<td class="prize-cell" data-id="12" ></td>
<td class="machine-control-cell" colspan="2" rowspan="2">
<div class="machine-control" onclick="ClickMe(event)">
<span>抽奖</span>
</div>
</td>
<td class="prize-cell" data-id="5" ></td>
</tr>
<tr>
<td class="prize-cell" data-id="11" ></td>
<td class="prize-cell" data-id="6" ></td>
</tr>
<tr>
<td class="prize-cell" data-id="10"></td>
<td class="prize-cell" data-id="9" ></td>
<td class="prize-cell" data-id="8" ></td>
<td class="prize-cell" data-id="7" ></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://topthinking.github.io/demos/jslottery/jslottery.js"></script>
<script type="text/javascript">
var jslottery = new Jslottery({
scroll_dom:'prize-cell',
scroll_dom_css_value:'#ffff7e',
scroll_dom_attr:'data-id',
scroll_dom_css:'background-color',
start_position:Math.floor(Math.random()*12+1),
callback:function(data){}
});
function ClickMe(){
jslottery.options.stop_position=Math.floor(Math.random()*12+1);
jslottery.options.speed=Math.floor(Math.random()*200+300);
jslottery.options.speed_up_position=Math.floor(Math.random()*6+1);
jslottery.options.speed_down_position=Math.floor(Math.random()*6+1);
jslottery.options.speedUp=Math.floor(Math.random()*30+20);
jslottery.options.speedDown=Math.floor(Math.random()*100+600);
jslottery.options.total_circle=Math.floor(Math.random()*5+2);
jslottery.start();
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » js跑马灯（可用来进行抽奖的前端的效果展示）