可以点击这里体验效果：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. easyui 数据库修改部分（基于数据添加逻辑功能修改）

    {iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...

  2. 推荐21款最佳 HTML5 网页游戏

    尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...

  3. linux内核中的每cpu变量

    一.linux中的每cpu变量 看linux内核代码的时候,会发现大量的per_cpu(name, cpu),get_cpu_var(name)等出现cpu字眼的语句.从语句的意思可以看出是要使用与当 ...

  4. tomcat:there is no resources that can be added or removed from server

    原因: 1.不是web project 解决方式:project-->property--project facet 新建或者修改 2. 版本不兼容 升级tomcat版本

  5. Oracle并行添加主键的方法

    环境:Oracle 11.2.0.3 需求:生产一张表由于前期设计不当,没有主键.现需要添加主键,数据量很大,想并行建立.   1.直接添加,提示ora-3001:未实施的功能;只能单线程建立主键 S ...

  6. ORA-01439: 要更改数据类型, 则要修改的列必须为空

    此方法有3处update操作,建议根据实际情况的数据量测试评估效率后选用. 思路:定义要更新数据类型的列为[col_old],数据类型为[datatype_old],临时列为[col_temp],数据 ...

  7. DotNet中几种常用的加密算法

    在.NET项目中,我们较多的使用到加密这个操作.因为在现代的项目中,对信息安全的要求越来越高,那么多信息的加密就变得至关重要.现在提供几种常用的加密/解密算法. 1.用于文本和Base64编码文本的互 ...

  8. Centos7下修改mysql5.6编码方式 解决网站中文显示问号

    解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家需要用到的字符,是国际编码. 具体操作: 1.进入MySQL控制台 mysql  -u root -p 输入密码 查看 ...

  9. 轻量级OLAP（一）：Cube计算

    有一个数据多维分析的任务: 日志的周UV: APP的收集量及标注量,TOP 20 APP(周UV),TOP 20 APP标注分类(周UV): 手机机型的收集量及标注量,TOP 20 机型(周UV),T ...

  10. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...