jQuery掷色子动画

2024-09-05 12:19:12

字体：大中小

来源：转载

供稿：网友

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

<!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(http://www.vevb.com/jscss/demoimg/201404/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}</style><script type="text/javascript" src="http://www.vevb.com/ajaxjs/jquery-1.9.1.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>

上一篇：图片瀑布流布局 HTml5 jquery代码

下一篇：jQuery鼠标悬浮遮罩显示分享按钮

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注