jQuery掷色子动画

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示：jQuery掷色子动画
		</title>
		<style type="text/css">
			.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(//ku.shouce.ren/files/images/201601/56a090f9b540c.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}
		</style>
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script type="text/javascript">
			$(function(){
				var dice = $("#dice");
				dice.click(function(){
					$(".wrap").append("<div id='dice_mask'></div>");
					//加遮罩
					dice.attr("class","dice");
					//清除上次动画后的点数
					dice.css('cursor','default');
					var num = Math.floor(Math.random()*6+1);
					//产生随机数1-6
					dice.animate({
						left: '+2px'}
								 , 100,function(){
						dice.addClass("dice_t");
					}
								).delay(200).animate({
						top:'-2px'}
													 ,100,function(){
						dice.removeClass("dice_t").addClass("dice_s");
					}
													).delay(200).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("您掷得点数是<span>"+num+"</span>");
						dice.css('cursor','pointer');
						$("#dice_mask").remove();
						//移除遮罩
					}
																							);
				}
						  );
			}
			 );
		</script>
	</head>
	<body>
		<div id="main">
			<h2 class="top_title">jQuery掷色子动画
			</h2>
			<div class="demo">
				<div class="wrap">
					<div id="dice" class="dice dice_1">
					</div>
				</div>
				<p id="result">请直接点击上面的色子！
				</p>
			</div>
		</div>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery掷色子动画

分类

HTML5代码

描述

虽然是用jQuery实现的掷色子动画，但最关键的是HTML5技术的支持，让掷骰子的瞬间动画效果十分逼真，可把本效果用在游戏编写上，目前很多网页游戏都在向HTML5靠拢，因此本源码参考价值挺大的。