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

<!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. 2019年跨越速递Java工程师笔试题

    1．下面哪个选项可以用于JSP页面之间传递对象(A C) A application B page C session D error  E response 评语:这道题考察的是对JSP内置对象的了 ...

  2. Googleplaystore数据分析

    本次所用到的数据分析工具:numpy.pandas.matplotlib.seaborn 一.分析目的 假如接下来需要开发一款APP,想了解开发什么类型的APP会更受欢迎,此次分析可以对下一步计划进行 ...

  3. 【数据结构】什么是二叉查找树（BST）

    什么是二叉查找树(BST) 1. 什么是BST 对于二叉树中的每个节点X,它的左子树中所有项的值都小于X中的项,它的右子树中所有项的值大于X中的项.这样的二叉树是二叉查找树. 以上是一颗二叉查找树,其 ...

  4. ASP.NET 页面控制

    一.HTTPRequest对象封装客户端请求页面或提交表单时提供的信息 请求方法:get/post 参数名/值 Cookie 使用的语言二.Rquest对象常用方法与属性 属性: QueryStrin ...

  5. javascript ES6 新特性之 class

    在之前的文章中我们讲过原型,原型链和原型链继承的文章,在 ES6 中为我们提供了更为方便的 class,我们先来看一下下面的例子: function Person(name) { //构造函数里面的方 ...

  6. goroutine,channel

    Go语言中有个概念叫做goroutine, 这类似我们熟知的线程,但是更轻. 以下的程序,我们串行地去执行两次loop函数: package main import "fmt" f ...

  7. (转)简单移动平均线（Simple Moving Average，SMA) 定义及使用

    原文链接:https://blog.csdn.net/Enjolras_fuu/article/details/88602309   扩展:https://www.investopedia.com/t ...

  8. Selenium(十二)：操作Cookie、调用JavaScript、HTML5的视频播放

    1. 操作Cookie 有时候我们想要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删 ...

  9. Locust压测结果准确性验证

    最近闲着没事做,就重新研究了一下基于python语言的Locust性能测试框架 发现在压测的过程中,虽然设置了100并发,但是通过实际监控,完全看不到100并发压测的效果 通过代码AOP日志监控接口的 ...

  10. Vue-easyui中如何给ComboGrid添加过滤器

    1,给ComboGrid绑定监听事件,将事件对象传入.文档:http://www.jeasyui.net/vue/653.html @filterChange="example($event ...