可以点击这里体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/26.htm

效果图：

代码如下：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>jQuery掷色子并显示随机结果-可乐义</title>

 <style type="text/css">

 #main_keleyi_com{width:800px;margin: 0px auto;}

 .demo{width:760px; height:120px; margin:0px auto;}

 .wrap{width:90px; height:90px; margin:20px auto 30px auto; position:relative}

 .dice{width:90px; height:90px; background:url(http://keleyi.com/image/a/hwwnhj7b.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://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.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_keleyi_com">

 <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>

 <a href="http://keleyi.com/a/bjad/vxywlkah.htm" target="_blank">原文</a>

 </div>

 </body>

 </html>

例子中，动画效果是使用jquery的animate函数实现的，请参考：http://keleyi.com/a/bjac/5b62295315de9ace.htm

而用到的Math.floor是取整数，详情请参考：http://keleyi.com/a/bjad/s0ix7ao1.htm

还用到append方法，append() 方法在被选元素的结尾（仍然在内部）插入指定内容，详情请参考http://keleyi.com/a/bjac/0vpch15n.htm

而removeClass方法和addClass方法请参考：http://keleyi.com/a/bjac/e9e40a974de5a902.htm

Web前端资源汇总:http://www.cnblogs.com/jihua/p/webfront.html

jquery投色子动画的更多相关文章

  1. 投色子--html demo

    这是之前客户想要看的一个效果,不知道放在博客里面有没有关系,当做备份吧. <!DOCTYPE HTML> <html> <head> <meta charse ...

  2. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  3. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  5. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  6. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  7. JQuery中的动画

    一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...

  8. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  9. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

随机推荐

  1. C#设计模式-桥接模式

    这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视品牌的遥控 ...

  2. Sql Server系列：日期和时间函数

    1. 获取系统当前日期函数GETDATE() GETDATE()函数用于返回当前数据库系统的日期和时间,返回值的类型为datetime. SELECT GETDATE() 2. 返回UTC日期的函数G ...

  3. 实战MEF（2）：导出&导入

    上一文中,我们大致明白了,利用MEF框架实现自动扫描并组装扩展组件的思路.本文我们继续前进,从最初的定义公共接口开始,一步步学会如何使用MEF. 在上一文中我们知道,对于每一个实现了公共规范的扩展组件 ...

  4. php的mysql\mysqli\PDO(三)PDO

    原文链接:http://www.orlion.ga/1153/ PDO是一种数据库抽象层,不止可以访问mysql还可以访问其他数据库. 一.__construct() PDO::__construct ...

  5. MySQL学习笔记三：库和表的管理

    1.MySQL数据库服务配置好后,系统会有4个默认的数据库. information_schema:虚拟对象,其对象都保存在内存中 performance_schema:服务器性能指标库 mysql: ...

  6. Rust初步（五）：Rust与C#性能比较

    我学习Rust的目的并不是说期望用它来取代掉现有的开发平台或语言.相反,我认为当前绝大部分研发团队,都不可能只用一个平台或者一个语言. 当组织增长,他们越来越依赖大量的编程语言.不同的编程语言有不同的 ...

  7. PHP关于web页面交互内容

    学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...

  8. 使用Free Spire.Presentation生成PowerPoint文件

      使用Free Spire.Presentation生成PowerPoint文件 前言 之前有写过一篇使用Free Spire.XLS生成图表的文章,朋友圈内反应还不错,都希望我能继续写下去,把类似 ...

  9. 如何在Windows Server 2008 上添加RD （远程桌面）会话主机配置的远程桌面授权服务器

    在Windows Server系列的现存活跃产品中都默认的会开放两个随机附送的远程控制的授权,而一些特殊条件下我们需要启用多个远程终端连接,在购买了相应的授权之后,我们如何将配置好的服务器添加到远程桌 ...

  10. Hammer.js分析（一）——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...