jquery implémente le carrousel à grille de neuf carrés lottery_jquery

Partageons maintenant un effet spécial de la loterie Jiugongge

Description des effets spéciaux :

Un effet spécial de page Web de code de loterie à grande roue à grille de neuf carrés jQuery. Cliquez sur le bouton de loterie pour démarrer une loterie aléatoire afin de sélectionner les prix. Vous pouvez définir la position de départ, le nombre de prix, le nombre de rotations et les paramètres de position gagnante. . (Test de compatibilité : IE7 et supérieur, Firefox, Chrome, Opera, Safari, 360 et autres navigateurs grand public)

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 implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
			<td class="lottery-unit lottery-unit-1"><img  src="/static/imghwm/default1.png"  data-src="images/2.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
			<td class="lottery-unit lottery-unit-2"><img  src="/static/imghwm/default1.png"  data-src="images/4.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
   <td class="lottery-unit lottery-unit-3"><img  src="/static/imghwm/default1.png"  data-src="images/3.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></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 implémente le carrousel à grille de neuf carrés lottery_jquery" ></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 implémente le carrousel à grille de neuf carrés lottery_jquery" ></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 implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
			<td class="lottery-unit lottery-unit-5"><img  src="/static/imghwm/default1.png"  data-src="images/6.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></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 implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
			<td class="lottery-unit lottery-unit-8"><img  src="/static/imghwm/default1.png"  data-src="images/6.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
			<td class="lottery-unit lottery-unit-7"><img  src="/static/imghwm/default1.png"  data-src="images/8.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
   <td class="lottery-unit lottery-unit-6"><img  src="/static/imghwm/default1.png"  data-src="images/7.png"  class="lazy" alt="jquery implémente le carrousel à grille de neuf carrés lottery_jquery" ></td>
		</tr>
	</table>
</div>

partie 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>

Partie 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结束 */

Paramètres pouvant être définis en JS :

index:-1, //La position actuelle de rotation, position de départ
count:0, //Combien de postes y a-t-il au total
timer:0, //L'ID de setTimeout, effacez-le avec clearTimeout
speed:20, //Vitesse de rotation initiale
times:0, //Nombre de rotations
cycle:50, //Nombre de tours de base : c'est-à-dire le nombre minimum de tours requis avant de participer à la loterie
prix :-1, //Position gagnante

Enfin, voici la photo de démo