投色子--html demo

这是之前客户想要看的一个效果,不知道放在博客里面有没有关系，当做备份吧。

<!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 文件,可以自行找个投色子的声音文件

 

 

 

这是效果图：

posted @ 2014-12-10 17:45  毛毛球的书签  阅读(401)  评论(0)  编辑  收藏  举报