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

<!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++实现通讯录管理系统(控制台版)

    c++实现通讯录管理系统(控制台版) 此项目适合c++初学者,针对c++基础知识,涉及到变量.结构体定义使用.数组定义使用.指针定义使用等. 运行之后的结果如下: 代码: #include <i ...

  2. Java中String直接赋字符串和new String的一些问题

    今天课堂测试做了几道String的练习题,做完直接心态爆炸...... 整理自下面两篇博客: https://www.cnblogs.com/marsitman/p/11248001.html htt ...

  3. 汇总:ASP.NET Core中HttpContext获取传参数据,有哪些方式

    一.原生方式: 1.POST(以ajax请求为案例,教大家用法) $.ajax({ type: "post", dataType: "json", cache: ...

  4. C#中获取指定路径下特定开头和后缀的所有文件

    场景 指定一个文件路径,获取当前路径下所有文件,并筛选出以指定内容开头和结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 ...

  5. Prism_Commanding(2)

    Commanding 除了提供对要在视图中显示或编辑的数据的访问之外,ViewModel还可能定义可由用户执行的一个或多个动作或操作.用户可以通过UI执行的动作或操作通常被定义为命令.命令提供了一种方 ...

  6. RDIFramework.NET敏捷开发框架WinForm新增文件中心-实现附件集中管理

    1.引言 文件中心类似附件管理是一个非常实用功能,可以归档自己平时所需要的文件,也可以把文件分享给别人,更像一个知识中心.文件中心主界面如下图所示,左侧"附件分类"展示了用户对文件 ...

  7. php对微信支付回调处理的方法(合集)

    支付完成后,微信会把相关支付结果和用户信息发送给商户,商户需要接收处理,并返回应答. 对后台通知交互时,如果微信收到商户的应答不是成功或超时,微信认为通知失败,微信会通过一定的策略定期重新发起通知,尽 ...

  8. SQL注入:DNS注入

    DNS注入原理: 通过我们构造的数据,访问搭建好的DNS服务器,查看DNS访问的日志即可获取我们想要得到的数据. DNS注入使用场景: 在某些无法直接利用漏洞获得回显的情况下,但是目标可以发起请求,这 ...

  9. 关于xshell连接limux界面按退格键不正常的问题

    这个问题通过修改xshell终端属性可以解决,步骤如下: "文件" -> "属性" -> "终端" -> "键盘 ...

  10. fork函数的一些小结

    今天遇到一个这样的问题,假设父进程有一个变量S,fork后,子进程中的变量S地址是否和父进程中的变量S 是相同的? 再学操作系统的时候,知道fork是采用的写时复制,所以如果子进程或者父进程不对变量S ...