jquery realizes nine Sudoku big turntable draw _jquery

Here we share a nine Sudoku lottery effect

Special Effects Description:

A jquery nine grid lottery draw code page special effects, click the Lottery button to start a random lottery selection prizes, you can set the starting position, the number of prizes, rotation times, winning position parameters. (Compatibility test: IE7 and above, Firefox, Chrome, Opera, Safari, 360 and other mainstream browsers)

Html:

<!--effect HTML start--> <div id= "lottery" > <table border= "0" cellpadding= "0" cellspacing= "0" > <tr> &LT;TD class= "Lottery-unit lottery-unit-0" ></td> <td class= "Lottery-unit Lottery-unit-1 "></td> <td class=" Lottery-unit lottery-unit-2 "></td> <td class= "Lottery-unit lottery-unit-3" >< /TD> </tr> <tr> <td class= "Lottery-unit lottery-unit-11" ></td > <td colspan= "2" rowspan= "2" ><a href= "#" ></a></td> <td class= "Lottery-unit Lottery-un It-4 "></td> </tr> <tr> <td class=" Lottery-unit lottery-unit-1 0 "></td> <td class=" Lottery-unit lottery-unit-5 "></td> </tr> <tr> <td class= "Lottery-unit lottery-unit-9" ></td> <td class= "lottery -unit lottery-unit-8 "></td> <td class=" Lottery-unit lottery-unit-7 "> </td> <td class= "Lottery-unit lottery-unit-6" ></td> </tr> </table> </div>

JS section

<script type= "Text/javascript" src= "jquery-1.8.3.min.js" ></script> <script type= "Text/javascript" > var lottery={index:-1,//current rotation to which position, starting position count:0,//Total number of locations timer:0,//settimeout ID, with cleartimeout clear speed:20,/ /Initial rotation speed times:0,//rotation times cycle:50,//rotation basic times: that is, at least how many times to rotate into the lottery link prize:-1,//winning position init:function (ID) {if ($ ("#" +id). Find (
			". Lottery-unit"). length>0 {$lottery = $ ("#" +id);
			$units = $lottery. Find (". Lottery-unit");
			This.obj = $lottery;
			This.count = $units. length;
		$lottery. Find (". lottery-unit-" +this.index). AddClass ("active");
	};
		}, Roll:function () {var index = This.index;
		var count = This.count;
		var lottery = This.obj;
		$ (lottery). Find (". lottery-unit-" +index). Removeclass ("active");
		Index + 1;
		if (index>count-1) {index = 0;
		};
		$ (lottery). Find (". lottery-unit-" +index). AddClass ("active");
		This.index=index;
	return false;
		}, Stop:function (index) {this.prize=index;
	return false;

}
}; function Roll () {LotterY.times + 1;
	Lottery.roll ();
		if (Lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {cleartimeout (Lottery.timer);
		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) |;		
		lottery.prize = index; }else{if (Lottery.times > Lottery.cycle+10 && (lottery.prize==0 && lottery.index==7) | | lottery.pr
			ize==lottery.index+1)) {lottery.speed = 110;
			}else{Lottery.speed + + 20;
		} if (lottery.speed<40) {lottery.speed=40;
		};
		Console.log (lottery.times+ ' ^^ ^^ ^^ ' +lottery.speed+ ' ^^ ^^ ^ ' +lottery.prize);
	Lottery.timer = settimeout (roll,lottery.speed);
return false;

} var Click=false;
	Window.onload=function () {lottery.init (' lottery ');
		$ ("#lottery a"). Click (function () {if (click) {return false;
			}else{lottery.speed=100;
			Roll (); CliCk=true;
		return false;
}
	});
};
 </script>

CSS Section

/* Effect CSS Start * *
#lottery {width:574px;height:584px;margin:0px Auto;background:url (... /images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table Td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color: #333; font-index:-999}
#lottery table TD a{width:284px;height:284px;line-height:150px;display:block;text-decoration : none;
#lottery table Td.active{background-color: #ea0000;}
/* Effect CSS End * *

JS can set the parameters:

Index:-1,//current rotation to which position, start position
count:0,//total number of locations
timer:0,//settimeout ID, cleared with cleartimeout
SPEED:20,//initial rotational speed
times:0,//rotation times
CYCLE:50,//rotation basic times: that is, at least how many times to rotate to enter the lottery link
Prize:-1,//winning position

Finally, the demo