投色子--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下载】
我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...
随机推荐
- Java之ssh框架spring配置文件配置定时任务
最近做了一个数据同步功能,要求晚上0点去定时同步数据,这是个老项目框架用的ssh,定时任务基于quartz,废话不多说,下面详细说说相关配置. 在spring的配置文件中: <!-- 0点定时任 ...
- C# MD5 32大写位加密 UTF-8编码
string UserMd5(string str) { string cl = str; string pwd = ""; MD5 md5 = MD5.Create();//实例 ...
- 自己开发的网站压力测试（阿里云1M带宽）
背景 项目采用微服务架构设计,独立商城系统,博客系统,搜索系统,sso单点系统部署在docker环境下 商城系统(django) 博客系统(flask) 搜索系统(es+flask+restful) ...
- 以太坊智能合约开发 Solidity学习
1. pragma solidity >=0.4.22 <0.6.0;//版本号,头文件 contract BooleanTest { bool _a;//默认返回false int nu ...
- Java入门系列之集合LinkedList源码分析（九）
前言 上一节我们手写实现了单链表和双链表,本节我们来看看源码是如何实现的并且对比手动实现有哪些可优化的地方. LinkedList源码分析 通过上一节我们对双链表原理的讲解,同时我们对照如下图也可知道 ...
- Selenium(十五)：unittest单元测试框架(一) 初识unittest
1. 认识unittest 什么是单元测试?单元测试负责对最小的软件设计单元(模块)进行验证,它使用软件设计文档中对模块的描述作为指南,对重要的程序分支进行测试以发现模块中的错误.在python语言下 ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- Linux Shell之监测程序
监测程序 一.探查进程 当程序运行在系统上时,我们称之为进程(process).想要监测这些进程,需要熟悉ps命令的用法.ps命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许多信息. 但是 ...
- kettle教程---通过配置表格配置实现数据的批量增量更新（实用）
本文接上篇文章,上面文章讲的是,通过配置文件的全量更新,现在说下增量更新 如上图所示,涉及到1个转换和1个作业. 1-表增量同步(转换) 可以通过读取同步表参数这个excel表格文件,获取表名称和同步 ...
- 201871010106-丁宣元 《面向对象程序设计（java)》第十二周学习总结
201871010106-丁宣元 <面向对象程序设计(java)>第十二周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...