这是之前客户想要看的一个效果,不知道放在博客里面有没有关系，当做备份吧。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Diec</title>
<style type="text/css">
#main {
height:500px;
}
#result {
width:100%;
}
.demo {
width: 760px;
height: 120px;
margin: 10px auto;
} .wrap {
width: 90px;
height: 90px;
margin: 120px auto 30px auto;
position: relative;
} .dice {
width: 90px;
height: 90px;
background: url("img/dice.png") no-repeat;
cursor: pointer;
} .dice_1 {
background-position: -5px -4px;
} .dice_2 {
background-position: -5px -107px;
} .dice_3 {
background-position: -5px -212px;
} .dice_4 {
background-position: -5px -317px;
} .dice_5 {
background-position: -5px -427px;
} .dice_6 {
background-position: -5px -535px;
} .dice_t {
background-position: -5px -651px;
} .dice_s {
background-position: -5px -763px;
} .dice_e {
background-position: -5px -876px;
} p#result {
text-align: center;
font-size: 16px;
} p#result span {
font-weight: bold;
color: #f30;
margin: 6px;
} #dice_mask {
width: 90px;
height: 90px;
background: #fff;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 999;
} #btnGO {
margin-top:100px;
width:100px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"> $(function () {
var $go = $("#btnGO"), dice = $("#dice");
$go.click(function () {
$(".wrap").append("<div id='dice_mask'></div>");//
dice.attr("class", "dice");//clear data
dice.css('cursor', 'default');
var num = Math.floor(Math.random() * 6 + 1);//random 1-6
console.log("num:" + num);
$('#auStop')[0].play();
dice.animate({ left: '+2px' }, 100, function () {
dice.addClass("dice_t");
}).delay(150).animate({ top: '-2px' }, 100, function () {
dice.removeClass("dice_t").addClass("dice_s");
}).delay(150).animate({ opacity: 'show' }, 600, function () {
dice.removeClass("dice_s").addClass("dice_e");
}).delay(100).animate({ left: '-2px', top: '2px' }, 100, function () {
dice.removeClass("dice_e").addClass("dice_" + num);
$("#result").html("you are point:<span>" + num + "</span>");
dice.css('cursor', 'pointer');
$("#dice_mask").remove();
});
}); $('<audio id="auStop"><source src="sound/diceroll.mp3" type="audio/mpeg"></audio>').appendTo('body');
});
</script>
</head>
<body>
<div id="main">
<h2 class="top_title">Sytle 1</h2>
<div class="demo">
<div class="wrap">
<div id="dice" class="dice dice_1"></div> <input type="button" value="GO" id="btnGO" />
</div>
<p id="result"></p>
</div>
</div>
<hr>
</body>
</html>
这是图片：（好像参考别人的demo改的，具体谁的不知道了，如有知道的可以告知一声）
没有办法上传 diceroll.mp3 文件,可以自行找个投色子的声音文件
这是效果图：