jQuery掷色子代码骰子色子小图标

这个是基于色子的静态小图标用jQuery代码使它们变化而形成的掷色子效果的动态图，代码简洁明了非常适合初学者学习使用。

定义骰子小图标

   <a class="play_do dice calm1" href="javascript:;"></a>
   <a class="play_do dice calm2" href="javascript:;"></a>
   <a class="play_do dice calm3" href="javascript:;"></a>
   <a class="play_do dice calm4" href="javascript:;"></a>
   <a class="play_do dice calm5" href="javascript:;"></a>
   <a class="play_do dice calm6" href="javascript:;"></a>
   <a class="play_do dice move1" href="javascript:;"></a>
   <a class="play_do dice move2" href="javascript:;"></a>
   <a class="play_do dice move3" href="javascript:;"></a>

css定义6个点位的骰子和3个变化的骰子

.dice{background:url(img/dice.png);width:93px;height:93px;display: inline-block;}
.calm1{background-position: 0px 0px;}
.calm2{background-position: 0px -105px;}
.calm3{background-position: 0px -210px;}
.calm4{background-position: 0px -315px;}
.calm5{background-position: 0px -425px;}
.calm6{background-position: 0px -535px;}
.move1{background-position: 0px -650px;}
.move2{background-position: 0px -763px;}
.move3{background-position: 0px -875px;}

js逻辑

<script type="text/javascript">
jQuery(function(){
	jQuery(".play_do").unbind().click(function(){
		var thisplay = jQuery(this);
		var count = 0;
		var diceid = 1;
		dice_change(thisplay,count,diceid);
	});
});
function dice_change(thisplay,count,diceid){
	count ++;
	diceid ++;
	thisplay.removeClass("move1");
	thisplay.removeClass("move2");
	thisplay.removeClass("move3");
	thisplay.addClass("move"+diceid);
	if(diceid == 3){
		diceid = 0;
	}
	if(count <= 30){
		var timer = setTimeout(function(){
			dice_change(thisplay,count,diceid); 
		},50);
	}else{
		clearTimeout(timer);
		dice_ok(thisplay);
	}
}
function dice_ok(thisplay){
	var num = Math.floor(Math.random()*6 + 1);
	thisplay.removeClass("move3");
	thisplay.removeClass("move2");
	thisplay.removeClass("move1");
	thisplay.removeClass("calm1");
	thisplay.removeClass("calm2");
	thisplay.removeClass("calm3");
	thisplay.removeClass("calm4");
	thisplay.removeClass("calm5");
	thisplay.removeClass("calm6");
	thisplay.addClass("calm"+num);
}
</script>