js掷色子并显示随机结果-Javascript-极念网

js掷色子并显示随机结果

作者：柯乐义来源：keleyi.com发布时间：2014/7/28 22:00:54查看数：53220

使用JS模拟实现掷色子效果，并显示结果，可以用来做论坛，网站上面的小游戏功能模块，

其实实现这样的JS动画效果的原理很简单的，我们要用到一张图片素材，然后用脚本控制图处的显示位置即可，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery掷色子并显示随机结果</title>
    <style type="text/css">
        .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(http://www.jiniannet.com/Attachment/20168) 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; }
    </style>
    <script type="text/javascript" src="/Resources/Script/JQuery.js"></script>
    <script type="text/javascript">
        $(function () {
            var dice = $("#dice");
            dice.click(function () {
                $(".wrap").append("<div id='dice_mask'></div>");//加遮罩
                dice.attr("class", "dice");//清除上次动画后的点数
                dice.css('cursor', 'default');
                var num = Math.floor(Math.random() * 6 + 1);//产生随机数1-6
                dice.animate({ left: '+2px' }, 100, function () {
                    dice.addClass("dice_t");
                }).delay(200).animate({ top: '-2px' }, 100, function () {
                    dice.removeClass("dice_t").addClass("dice_s");
                }).delay(200).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("您掷得点数是<span>" + num + "</span>");
                    dice.css('cursor', 'pointer');
                    $("#dice_mask").remove();//移除遮罩
                });
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <h2 class="top_title">jQuery掷色子并显示随机结果</h2>
        <div class="demo">
            <div class="wrap">
                <div id="dice" class="dice dice_1"></div>
            </div>
            <p id="result">请直接点击上面的色子！</p>
        </div>
    </div>
</body>
</html>

演示效果：

用到的图片素材：

作者：柯乐义出处：http://keleyi.com/a/bjad/vxywlkah.htm