jquery melaksanakan lottery_jquery karusel grid sembilan persegi

Sekarang mari kongsikan kesan istimewa loteri Jiugongge

Perihalan kesan khas:

Kesan khas halaman web kod loteri roda sembilan persegi jQuery Klik butang loteri untuk memulakan loteri rawak untuk memilih hadiah Anda boleh menetapkan kedudukan permulaan, bilangan hadiah, bilangan putaran dan parameter kedudukan menang . (Ujian keserasian: IE7 dan ke atas, Firefox, Chrome, Opera, Safari, 360 dan penyemak imbas arus perdana yang lain)

HTML:

<!--效果html开始-->
<div id="lottery">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="lottery-unit lottery-unit-0"><img  src="/static/imghwm/default1.png"  data-src="images/1.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td class="lottery-unit lottery-unit-1"><img  src="/static/imghwm/default1.png"  data-src="images/2.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td class="lottery-unit lottery-unit-2"><img  src="/static/imghwm/default1.png"  data-src="images/4.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
   <td class="lottery-unit lottery-unit-3"><img  src="/static/imghwm/default1.png"  data-src="images/3.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
		</tr>
		<tr>
			<td class="lottery-unit lottery-unit-11"><img  src="/static/imghwm/default1.png"  data-src="images/7.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td colspan="2" rowspan="2"><a href="#"></a></td>
			<td class="lottery-unit lottery-unit-4"><img  src="/static/imghwm/default1.png"  data-src="images/5.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
		</tr>
		<tr>
			<td class="lottery-unit lottery-unit-10"><img  src="/static/imghwm/default1.png"  data-src="images/1.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td class="lottery-unit lottery-unit-5"><img  src="/static/imghwm/default1.png"  data-src="images/6.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
		</tr>
  <tr>
			<td class="lottery-unit lottery-unit-9"><img  src="/static/imghwm/default1.png"  data-src="images/3.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td class="lottery-unit lottery-unit-8"><img  src="/static/imghwm/default1.png"  data-src="images/6.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
			<td class="lottery-unit lottery-unit-7"><img  src="/static/imghwm/default1.png"  data-src="images/8.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
   <td class="lottery-unit lottery-unit-6"><img  src="/static/imghwm/default1.png"  data-src="images/7.png"  class="lazy" alt="jquery melaksanakan lottery_jquery karusel grid sembilan persegi" ></td>
		</tr>
	</table>
</div>

bahagian js

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var lottery={
	index:-1,	//当前转动到哪个位置，起点位置
	count:0,	//总共有多少个位置
	timer:0,	//setTimeout的ID，用clearTimeout清除
	speed:20,	//初始转动速度
	times:0,	//转动次数
	cycle:50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
	prize:-1,	//中奖位置
	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)|0;
			lottery.prize = index;		
		}else{
			if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==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>

Bahagian CSS

/* 效果CSS开始 */
#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;}
/* 效果CSS结束 */

Parameter yang boleh ditetapkan dalam JS:

indeks:-1, //Kedudukan semasa putaran, kedudukan permulaan
count:0, //Berapa banyak kedudukan yang ada kesemuanya
pemasa:0, //ID setTimeout, kosongkannya dengan clearTimeout
kelajuan:20, //Kelajuan putaran awal
times:0, //Bilangan putaran
kitaran:50, //Bilangan asas putaran: iaitu bilangan putaran minimum yang diperlukan sebelum memasuki loteri
hadiah:-1, //Kedudukan menang

Akhir sekali, inilah gambar demo