可以点击这里体验效果：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. MongoDB 聚合操作

    在MongoDB中,有两种方式计算聚合:Pipeline 和 MapReduce.Pipeline查询速度快于MapReduce,但是MapReduce的强大之处在于能够在多台Server上并行执行复 ...

  2. UpdateException-更新条目时出错分析

    不屁话1张图搞定: 我是这个错: 2015-03-27 00:25:00,493 [9] ERROR log - System.Data.Entity.Infrastructure.DbUpdateE ...

  3. Android仿微信拍摄短视频

    近期做项目需要添加上传短视频功能,功能设置为类似于微信,点击开始拍摄,设置最长拍摄时间,经过研究最终实现了这个功能,下面就和大家分享一下,希望对你有帮助. 1.视频录制自定义控件: /** * 视频播 ...

  4. IOS遍历网页获取网页中<img>标签中的图片url

    前言: 项目中遇见一个需求遍历网页中所有的<img>标签并且去处图片的url 第一步:编写获取<img >标签的正则表达式,代码如下: -(NSArray*)getImgTag ...

  5. EntityFramework 7 更名为EntityFramework Core（预发布状态）

    前言 最近很少去学习和探索新的东西,尤其是之前一直比较关注的EF领域,本身不太懒,但是苦于环境比较影响自身的心情,所以迟迟没有下笔,但是不去学习感觉在精神层面缺少点什么,同时也有园友说EF又更新了,要 ...

  6. Windows Server 2008 R2 WEB服务器配置系列文章索引

    最近这段时间趁天翼云1元主机活动,购买了一个1元主机,主要是为了写一些服务器配置的教程. 已经完成如下几篇文章,送给大家. 国内云主机比较 天翼云/阿里云/腾讯云 Windows Server 200 ...

  7. [OpenCV] Background subtraction

    不错的草稿.但进一步处理是必然的,也是难点所在. http://docs.opencv.org/master/d1/dc5/tutorial_background_subtraction.html#g ...

  8. js ES6 对字符的操作注意事项

    1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...

  9. ZOJ Problem Set - 1334 Basically Speaking ac代码及总结

    这道题目不难,是一道简单的进制转换问题,但是发现了自己两个遗漏的知识点: 1.关于scanf (1)scanf函数在输入时是以回车或者空格作为一次输入的结束 (2)scanf函数在输入字符串的过程中是 ...

  10. Myeclipse无法开启Servers视图解决办法

    IDE报错如下:  解决办法:1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runtime/.sett ...