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

<!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. HBase删除数据的原理

    转自:https://blog.csdn.net/cenjianteng/article/details/96645447 -------------------------------------- ...

  2. np.array()和np.dot()的区别

    1.生成数组的方式不同 2.乘法计算方式不同 array生成数组,np.dot()表示矩阵乘积,(*)号或np.multiply()表示点乘 mat生成数组,(*)和np.dot()表示矩阵相乘,点乘 ...

  3. 指定节点滚动到屏幕中间的js

    父节点的class是slimScrollDiv 子节点的class是fa-warning 执行这个js document.getElementsByClassName("slimScroll ...

  4. Spring Cloud（一）：入门篇

    Spring Cloud 简介 Spring Cloud 是一个基于 Spring Boot 实现的微服务架构开发工具,可以快速构建分布式系统中的某些常用模式,如配置管理.服务治理.断路器.智能路由. ...

  5. .net core 反射的介绍与使用

      1. 概述反射 通过反射可以提供类型信息,从而使得我们开发人员在运行时能够利用这些信息构造和使用对象. 反射机制允许程序在执行过程中动态地添加各种功能.   2. Type类的介绍  是BCL(基 ...

  6. Winform中使用DevExpress的CheckEdit控件实现多选条件搜索

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  7. 执行超大的.sql文件处理，100M++

    sqlcmd的命令参数如下: 1    [-U 登录 ID]             [-P 密码] 2  [-S 服务器]                [-H 主机名]           [-E ...

  8. Java生鲜电商平台-交易对账以及跟商家对账的思考

    Java生鲜电商平台-交易对账以及跟商家对账的思考 说明:对于任何一家电商而言,资金的安全尤为重要,在资金管理过程中,涉及到交易订单的对账以及商家的对账,那i么如何来保证对账的高效与准确呢? 公司在搭 ...

  9. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  10. OpenCV:图像的颜色空间转换

    导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(image) ...