一个简单的旋转效果 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
<title>dddd</title>
<style type="text/css">
.lotteryWap{width: 454px;margin: 100px auto 0;}
.lotteryWap table td{width: 150px;height: 150px;text-align: center;vertical-align: middle;font-size: 24px;color: #333;}
.lotteryWap table td a{width: 150px;height: 150px;line-height: 150px;display: block;text-decoration: none;}
.lotteryWap table td.active{color: red;background-color: #eee;}
</style>
</head>
<body>
<div class="lotteryWap">
	<table>
		<tr>
			<td class="lottery lottery0">0</td>
			<td class="lottery lottery1">1</td>
			<td class="lottery lottery2">2</td>
		</tr>
		<tr>
			<td class="lottery lottery7">7</td>
			<td><a href="#">button</a></td>
			<td class="lottery-unit lottery3">3</td>
		</tr>
		<tr>
			<td class="lottery lottery6">6</td>
			<td class="lottery lottery5">5</td>
			<td class="lottery lottery4">4</td>
		</tr>
	</table>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var lottery={
	index:0,	//当前转动到哪个位置
	count:0,	//总共有多少个位置
	speed:100,	//速度
	times:0,	//移动次数
	cycle:50,	//初始化移动次数
	prize:-1,
	init:function(box){
			var unit = box.find(".lottery");
			console.log(unit)
			this.obj = box;
			this.count = unit.length;
			console.log(this.count)
			box.find(".lottery"+this.index).addClass("active");
	},
	roll:function(){
		var index = this.index;
		var count = this.count;
		var lottery = this.obj;
		lottery.find(".lottery"+index).removeClass("active");
		index ++;
		if (index>count-1) {
			index = 0;
		};
		lottery.find(".lottery"+index).addClass("active");
		this.index=index;
		return;
	},
	complete:function(index){
		setTimeout(function(){alert(index)},1000);
		return;
	}
};
function roll(){
	lottery.times += 1;
	lottery.roll();
	console.log(lottery.cycle)
	if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
		lottery.complete(lottery.index);
		lottery.prize=-1;
		lottery.times=0;
		click=false;
		
	}else{
		if (lottery.times<lottery.cycle) {
			lottery.speed -= 10;
		}else if(lottery.times==lottery.cycle) {
			var index = Math.random()*(lottery.count)|0;
			lottery.prize = index;		
		}else{
			lottery.speed += 20;
		}
		if (lottery.speed<40) {
			lottery.speed=40;
		};
		lottery.timer = setTimeout(roll,lottery.speed);
	}
	return;
}
var click=false;
window.onload=function(){
	lottery.init($('.lotteryWap'));	
};
$(".lotteryWap a").click(function(){
	if (click) {
		return;
	}else{
		roll();
		click=true;
		return;
	}
});
</script>
</body>
</html>

　　

posted @ 2016-11-30 14:12  <张磊>  阅读(316)  评论(0)    收藏  举报