这是之前客户想要看的一个效果,不知道放在博客里面有没有关系，当做备份吧。
<!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 文件,可以自行找个投色子的声音文件
这是效果图：
