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

<!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. 关于实现序列化接口Serializable

    关于javabean,是否需要实现序列化接口这个问题,只有当这些javabean需要通过分布式网络传输,磁盘持久化等情况下才有必要,其他情况并非必须.

  2. vue定义data的三种方式与区别

    在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...

  3. Vue 从入门到进阶之路（十四）

    之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...

  4. 拥抱webpack4，有效缩减构建时间57%+

    背景 最近有感觉到,随着系统模块数量的增加,wepack编译打包的速度越来越慢,于是我想给项目做一下优化升级,也借此机会系统地学习一下webpack4. 升级过程 当前版本 "depende ...

  5. (转)GitHub Desktop 拉取 GitHub上 Tag 版本代码

    转自:GitHub Desktop 拉取 GitHub上 Tag 版本代码 一直在使用 GitHub Desktop 图形化 git 管理工具,统一项目框架版本时需要切换到ThinkPHP Tag 分 ...

  6. 使用策略模式重构switch case 代码

    目录 1.背景 2.案例 3.switch…case…方式实现 4.switch…case…带来的问题 5.使用策略模式重构switch…case…代码 6.总结 1.背景 之前在看<重构    ...

  7. 基于 Storyboard 多种方式的页面跳转、参数传递

    原文 通过按钮关联跳转 选中 Button ,然后点击 action 右边拖拽到 第二个页面 选择 "Show"即可完成跳转关联. 定义页面间 segue Id,通过代码触发跳转 ...

  8. Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

    Spring Boot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提 ...

  9. add to explorer context menu需不需要勾选

    添加到鼠标右键菜单,添加以后,可以直接右键文件,直接选择这个软件打开选择的文件,建议勾选

  10. manjaro安装后的配置

    1.添加中科大源 参考https://blog.csdn.net/liyunfu233/article/details/87381017 sudo nano /etc/pacman.conf 在文末添 ...