可以点击这里体验效果：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. easyuidatagrid中load,reload,loadData的区别

    摘要:datagrid中有load,reload,loadData那三个方式,皆是加载数据的,但又有差别.下面让我们一起来看看: 首先,load方法,比如我已经定义一个datagrid的id为grid ...

  2. Make Helix Curve in OpenCASCADE

    Make Helix Curve in OpenCASCADE eryar@163.com Abstract. OpenCASCADE does not provide helix curve dir ...

  3. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  4. CentOS 7下MySQL服务启动失败的解决思路

    今天,启动MySQL服务器失败,如下所示: [root@spark01 ~]# /etc/init.d/mysqld start Starting mysqld (via systemctl): Jo ...

  5. II7.0 发布 MVC 4.0 三个小问题记录

    1,403.14-Forbidden Web 服务器被配置为不列出此目录的内容 根据提示更改:使用 IIS 管理器启用目录浏览. 打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录 ...

  6. 软件工程-构建之法 Visual Studio开发平台的安装与单元测试

    一.前言 自从开始了大三下的生活,学校开设一门课程“软件工程”,刚好我们是第一届进行课程改革,不在像以前那样背背概念,考前进行好好突击,然后考试就能过,最后毕业了发现软件工程课程到底我们在其中学习了什 ...

  7. C#中DataTable转化为List<T>解析

    在.net项目中使用到DataTable和List<T>集合的地方较多, 泛型的好处: 它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和拆箱,或对引用类 ...

  8. 几个步骤轻松搞定ASP.NET 依赖注入。

    http://www.it165.net/pro/html/201407/17685.html 我在网上看到了这篇文章,这边文章主要说的方法就是通过读取配置文件来解决依赖注入的问题.但是每次新建一个依 ...

  9. 帮公司人事MM做了个工资条拆分工具

    引言 偶尔一次午饭时人事说加班加到8点多,纯手工复制粘贴Excel的内容,公司大概150多人吧,每次发工资时都需要这样手动处理,将一个Excel拆分成150多个Excel,再把里面的内容粘过去,如此循 ...

  10. 【集合框架】JDK1.8源码分析之HashMap（一）

    一.前言 在分析jdk1.8后的HashMap源码时,发现网上好多分析都是基于之前的jdk,而Java8的HashMap对之前做了较大的优化,其中最重要的一个优化就是桶中的元素不再唯一按照链表组合,也 ...