投色子--html demo
这是之前客户想要看的一个效果,不知道放在博客里面有没有关系，当做备份吧。
<!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的更多相关文章
- jquery投色子动画
可以点击这里体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/26.htm 效果图: 代码如下: <!DOCTYPE HTML> <html& ...
- Web前端资源汇总
本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...
- 美团网基于机器学习方法的POI品类推荐算法
美团网基于机器学习方法的POI品类推荐算法 前言 在美团商家数据中心(MDC),有超过100w的已校准审核的POI数据(我们一般将商家标示为POI,POI基础信息包括:门店名称.品类.电话.地址.坐标 ...
- HDU-4405 Aeroplane chess
http://acm.hdu.edu.cn/showproblem.php?pid=4405 看了一下这个博客http://kicd.blog.163.com/blog/static/12696191 ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- POJ1059 Chutes and Ladders
题目来源:http://poj.org/problem?id=1059 题目大意: 有一种叫做“Chutes and Ladders”(梯子和滑梯)的简单游戏.游戏在一块棋盘上进行,棋盘上有编号从1- ...
- 进击python第4篇：初探模块
模块,用一砣代码实现了某个功能的代码集合,任何python程序都可以作为模块导入,n个 .py 文件组成的代码集合就称为模块. but 为什么要引入模块概念?主要原因是代码重用(code reuse) ...
- 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] ...
- 免费图片存储和图话【提供demo下载】
我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...
随机推荐
- Vue.js学习笔记--菜鸟搭建一个企业级vue的项目
vue.js新手搭建一个企业项目,从0开始 前置条件: node.npm请先安装配置好 下面开始: npm 下载vue-cli脚手架工具 确认安装成功看到版本号: 初始化项目,选用webpack(p ...
- 将vue项目部署在Linux的Nginx下，并设置为局域网内访问
1. 下载 wget http://nginx.org/download/nginx-1.12.2.tar.gz 2. 解压缩 tar -zxvf linux-nginx-1.12.2.tar.gz ...
- 图解Numpy的tile函数
Numpy的tile(A, reps)函数,就是将原矩阵横向.纵向地复制.tile是瓷砖的意思,顾名思义,这个函数就是把数组像瓷砖一样铺展开来. 举个例子,原矩阵: 横向铺展: 纵向铺展: 横向铺 ...
- go语言之数组
1.go语言的数组和python的列表不一样,python的列表没有限定类型,而go的数组限定的类型,理由是这样的,请看下面的图 go语言的数组会数组中第一个值的内存地址,在我们上面的例子中,数组中的 ...
- 【nodejs原理&源码赏析（4）】深度剖析cluster模块源码与node.js多进程（上）
目录 一. 概述 二. 线程与进程 三. cluster模块源码解析 3.1 起步 3.2 入口 3.3 主进程模块master.js 3.4 子进程模块child.js 四. 小结 示例代码托管在: ...
- 04-JVM垃圾收集器详解
1.垃圾收集器的种类 垃圾收集算法是内存回收的方法论,垃圾收集器是内存回收的具体实现工具.目前没有万能的垃圾收集器,需要根据具体的应用场景选择合适的垃圾收集器. 1.1Serial收集器(-XX:+U ...
- C# 使用GDI绘制雷达图
最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: public static class RadarDemo { ; ; ...
- java的异常抛出throws和throw的简单使用
前提: 当在程序测试时,如果你需要定义一个自己的异常,而非现在已经存在的异常,这个时候你需要用到throws和throw,try-catch只是一个简单的捕获异常的过程. 代码如下: package ...
- [20191101]完善vim的bccalc插件8.txt
[20191101]完善vim的bccalc插件8.txt --//今天移植bccalc插件到linux,发现一些问题.我自己已经在windows下使用一段时间,从来没有在linux下测试.看来很少人 ...
- Druid-类图-属性表
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本篇为「工具人」文章,建议直接用「ctrl+f」进行查找属性.方法.类名,快速了解其含义和所属类. 主要流程里主要涉及到的类名称.类属性.类 ...