定义骰子小图标
<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>