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

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

这是效果图：

投色子--html demo的更多相关文章

  1. jquery投色子动画

    可以点击这里体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/26.htm 效果图: 代码如下: <!DOCTYPE HTML> <html& ...

  2. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  3. 美团网基于机器学习方法的POI品类推荐算法

    美团网基于机器学习方法的POI品类推荐算法 前言 在美团商家数据中心(MDC),有超过100w的已校准审核的POI数据(我们一般将商家标示为POI,POI基础信息包括:门店名称.品类.电话.地址.坐标 ...

  4. HDU-4405 Aeroplane chess

    http://acm.hdu.edu.cn/showproblem.php?pid=4405 看了一下这个博客http://kicd.blog.163.com/blog/static/12696191 ...

  5. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  6. POJ1059 Chutes and Ladders

    题目来源:http://poj.org/problem?id=1059 题目大意: 有一种叫做“Chutes and Ladders”(梯子和滑梯)的简单游戏.游戏在一块棋盘上进行,棋盘上有编号从1- ...

  7. 进击python第4篇：初探模块

    模块,用一砣代码实现了某个功能的代码集合,任何python程序都可以作为模块导入,n个 .py 文件组成的代码集合就称为模块. but 为什么要引入模块概念?主要原因是代码重用(code reuse) ...

  8. hdu4405 概率dp

    飞行棋游戏 问从0结束游戏的投色子次数期望是多少 设dp[i]表示i到n的期望,那么可以得到dp[i]=(dp[i+1]+dp[i+2]+dp[i+3]+dp[i+4]+dp[i+5]+dp[i+6] ...

  9. 免费图片存储和图话【提供demo下载】

    我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...

随机推荐

  1. 调试seanbell/intrinsic遇到的坑

    那些遗忘过去的人注定要重蹈覆辙.——乔治•桑塔亚纳  Authorized error 刚开始按作者 GitHub 上的指示,当运行环境配置好,并且 make 之后,因为生成的 decompose.p ...

  2. maven中servlet报错：不识别此servlet问题的解决办法

    原因 使用maven集成的tomcat插件的时候,tomcat的lib中,自带servlet-api和jsp. 如果maven中再次导入了这两个jar,会造成jar包冲突现象. 解决办法 我们只是想编 ...

  3. 【C#】学习笔记(4) 值类型和引用类型相关（Null相关）

    Reference and Value Types Value Types(值类型): struct(结构体) 独立的实例或者是拷贝 值的改变不会影响其它拷贝 值就是它所代表的信息 没有引用,所以不可 ...

  4. [转]Outlook 2016 will not display Web linked images

    本文转自:https://community.spiceworks.com/topic/1952626-outlook-2016-will-not-display-web-linked-images ...

  5. 【React Native】react-native之集成支付宝支付、微信支付

    一.在使用支付宝支付.微信支付之前导入桥接好的头文件 github地址:https://github.com/xujianfu/react-native-pay 二.集成支付宝支付流程 RN支付宝需要 ...

  6. 从0系统学Android--2.6 Activity 的最佳实践

    从0系统学Android--2.6 Activity 的最佳实践 本系列文章目录:更多精品文章分类 本系列持续更新中.... 实践中的技巧 2.6.1 知晓当前是在哪个 Activity 这个其实很简 ...

  7. SQL Server(MSSQLSERVER) 请求失败或服务未及时响应，有关详细信息，请参见事件日志或其他的适用的错误日志。

    转自:https://www.fengjunzi.com/blog-25573.html 问题 有时候sqlserver无法启动了,原因是mssqlserver服务没有启动,当你手动启动时,又出现服务 ...

  8. activeMQ - how to install and run

    apache activeMQ how to install and run https://www.cnblogs.com/lyxy/p/5969116.html

  9. android tween animation合集

    自己写的一些tween animation动画xml文件,可用于activity切换,图片切换动画等 http://files.cnblogs.com/zj2012zy/anim.rar

  10. JavaScript-----6.流程控制：分支

    1.流程控制 就是来控制代码按照何种顺序来执行,流程控制有三种结构:顺序结构.分支结构.循环结构 2.顺序流程控制 程序按照代码先后顺序依次执行 3.分支流程控制 JS中提供两种分支结构语句:if语句 ...