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

<!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. C语言程序设计100例之（16）：巧解算式

    例16  巧解算式 问题描述 在1.2.3.4.5.6.7.8.9.10个数中间加上加号或减号,使得到的表达式的值为自然数N,如果中间没有符号,则认为前后为一个数,如1 2 3认为是一百二十三(123 ...

  2. Linux中fuser命令用法详解

    描述: fuser可以显示出当前哪个程序在使用磁盘上的某个文件.挂载点.甚至网络端口,并给出程序进程的详细信息. fuser显示使用指定文件或者文件系统的进程ID. 默认情况下每个文件名后面跟一个字母 ...

  3. [转]UiPath教程：UiPath及其组件介绍

    本文转自:http://www.rpa-cn.com/UiPathxuexirenzheng/UiPathzaixianxueyuan/2019-06-05/937.html 根据德勤2018年的调查 ...

  4. 【转载】Android Context 到底是什么？

    什么是Context? 一个Context意味着一个场景,一个场景就是我们和软件进行交互的一个过程.比如当你使用微信的时候,场景包括聊天界面.通讯录.朋友圈,以及背后的一些数据. 那么从程序的角度来看 ...

  5. 【转载】C++编译过程

    C++编译过程 C++ 编译过程在介绍编译器之前,先简单地说一下 C++ 的编译过程,以便理解编译器的工作.编译(compiling)并不意味着只创建仅仅一个可执行文件.创建一个可执行文件是一个多级过 ...

  6. 关于华为模拟器（eNSP）添加路由器启动后一直打印#号的原因

    操作系统为win10 专业版 1903:1.首先打开控制面板,找到windows defender防火墙,在“允许应用通过防火墙”中把和espn相关的两个的专网和公网都勾选上,最后确定:然后重启华为模 ...

  7. ArrayList的输出以及一些问题

    //首先需要创建一个ArrayList ArrayList arr=new ArrayList(); //然后往ArrayList里面插入一些值 arr.add("a"); arr ...

  8. WinFrom和WebFrom的区别

    原文链接:https://blog.csdn.net/sloder/article/details/6145169 一是Winform的定位机制没有Webform丰富,web里有table,div(浮 ...

  9. HTML5常见的取值与单位

    HTML5常见的取值与单位     长度单位包括 相对长度单位包括:em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括:cm, mm, q, in, pt, pc ...

  10. vmware workstations 虚拟机安装CentOS

    1.下载vmware ,我的版本是从上学时保存网盘的,版本比较低,链接如下: 链接:https://pan.baidu.com/s/19QP0q8xmPWIPn-rziPTvKg 提取码:lvh9 2 ...