投色子--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下载】
我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...
随机推荐
- vuetify，vux，Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- 秒懂：tomcat的maxConnections、maxThreads、acceptCount 图解
后面附图 | 秒懂 疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大家介 ...
- java8-新的日期API
背景 java的日期和时间API设计不理想,java8引入新的时间和日期API就是为了解决这个问题. 老的日期API的核心类 缺点 Date 月从0开始,年最小从1900年开始,没有时区的概念 Cal ...
- 【Git教程】如何清除git仓库的所有提交记录，成为一个新的干净仓库
一.引言 马三也算Github的忠实用户了,经常会把一些练手的项目传到Github上面进行备份.其中有一个名为ColaFramework的Unity框架项目,马三开发了一年多了,期间提交代码的时候在L ...
- Java描述设计模式(10)：组合模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.文件系统 下图是常见的计算机文件系统的一部分. 文件系统是一个树结构,树上长有节点.树的节点有两种: 树枝节点 即文件夹,有 ...
- Python有参函数的使用
1.给定验证码长度n,生成随机验证码,验证码由数字.字母组成(参考chr()内置方法) 程序代码如下: import random def create_check_code(n): check_co ...
- Erlang/Elixir精选-第3期(20191216)
2019年,Erlang社区在应用层上除了aeternity区块链让人印象深刻(Killer App)外,就没有特别出彩的应用出现.在Web,IoT,MessageQueue这些成熟领域,已经有相当成 ...
- Windows7中启动Mysql服务时提示：拒绝访问的一种解决方式
场景 在Windows7中打开任务管理器--服务下 找到mysql的服务点击启动时提示: 拒绝访问 这是因为权限不够导致的不能启动sql服务. 点击 任务管理器右下角的服务 在这里就可以正常启动服务
- JavaScript 语法:松软科技前端教程
JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何 ...
- HTML中特殊符号编码对照表，html特殊符号编码都有哪些？
HTML中一些无法打出来的符号可以用相应的代码进行代替显示,本文提供了一些HTML特殊符号相应的代码供开发者参考. 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 ...