可以点击这里体验效果：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. sublime text3同时编辑多行

    sublime text3同时编辑多行 下面的才是正确的姿势,之前一直是shift + 右键 拖啊. http://stackoverflow.com/questions/32127604/how-t ...

  2. iOS-SDWebimage底层实现原理

    其实有些框架的实现原理,并没有想象中那么难,思想也很简单,主要是更新第三方框架的作者对自己写的代码,进行了多层封装,使代码的可读性降低,也就使得框架看起来比较难.我来实现以下SDWebimage的的曾 ...

  3. html5多出来的字自动隐藏并显示...

  4. 【Win 10应用开发】认识一下UAP项目

    Windows 10 SDK预览版需要10030以上版本号的Win 10预览版系统才能使用.之前我安装的9926的系统,然后安装VS 2015 CTP 6,再装Win 10 SDK,但是在新建项目后, ...

  5. py2exe使用中遇到的几个问题

    问题: 在使用py2exe对所写的python脚本打包成.exe可执行程序时,遇到两个问题: 问题1: RuntimeError: maximum recursion depth exceeded w ...

  6. 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程

    Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...

  7. 浅谈webWorker

    一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaS ...

  8. JDBC与JAVA数据库编程

    一.JDBC的概念 1. JDBC (Java DataBase Connectivity) Java数据库连接 a) 主要提供java数据库应用程序的API支持 2. JDBC的主要功能 a) 创建 ...

  9. 如何使用免费控件将Word表格中的数据导入到Excel中

    我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...

  10. PHP面试题目搜集

    搜集这些题目是想在学习PHP方面知识有更感性的认识,单纯看书的话会很容易看后就忘记. 曾经看过数据结构.设计模式.HTTP等方面的书籍,但是基本看完后就是看完了,没有然后了,随着时间的推移,也就渐渐忘 ...