js跑马灯(可用来进行抽奖的前端的效果展示)

<!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跑马灯(可用来进行抽奖的前端的效果展示)

赞 (0)
分享到:更多 ()

发表评论 0