网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试

js代码如下:

 $(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();//移除遮罩
});
});
});

在线演示:demo

jQuery掷骰子的更多相关文章

  1. JS实现掷骰子

    JS实现掷骰子 实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图 ...

  2. 掷骰子-IOS新手项目练习(抱歉,由于个人原因,图片没显示,要源码的项目私聊)

    ---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...

  3. html5掷骰子的小demo

    代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...

  4. TurnipBit开发板掷骰子小游戏DIY教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 下面带大家用TurnipBit开发板实现一个简单的小游戏- ...

  5. 掷骰子DApp的实现

    前言:​ DApp前些日子比较火, 这段时间有些低迷. 我也是后知后觉, 现在才接触一些, 这篇博文就当做DApp的初次印象吧.​ 本文要写的是基于智能合约的博彩游戏DApp—骰子游戏, 来看看它是怎 ...

  6. python-模拟掷骰子,两个筛子数据可视化

    """ 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...

  7. 纯php实现中秋博饼游戏(2):掷骰子并输出结果

    这篇是纯php实现中秋博饼游戏系列博文(2) 上文是:纯php实现中秋博饼游戏(1):绘制骰子图案 http://www.cnblogs.com/zqifa/p/php-dice-1.html要纯ph ...

  8. 掷骰子游戏窗体实现--Java初级小项目

    掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...

  9. 3星|《给你讲个笑话:我是创业公司CEO》:创业成功就是上帝掷骰子

    给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...

随机推荐

  1. HTML5-原声拖放

    最早在网页中引入js拖放功能的是IE4,并且只可以拖放图像和某些文本.IE5.5以后网页中的任何元素都可以进行拖放.HTML5以IE为实例制定了拖放规范.FireFox3.5.Safari3+和Chr ...

  2. bootstrap .col-md-6 文字居中问题处理

  3. ASP.NET Mvc Razor视图语法

    在ASP.NET MVC中有两套模版引擎,一套是ASPX,一套是Razor,从事过WebForms开发的朋友们,对于ASPX模版已经很熟悉了,下面我说一下我所熟悉的Razor模版引擎的一些语法,供大家 ...

  4. NOI 2015 T1 等式

    我有 n 个式子 对于每个式子,要么是 xi = xj 的形式,要么是 xi <> xj 的形式. 现在我给出这 n 个式子,你要告诉我,这 n 个式子是否可能同时成立. [输入格式] 每 ...

  5. jquery set selected for select element

    //1$("#Provider_" + counter + " option[value=" + FormData.ID + "]").at ...

  6. Memcached(四)Memcached的CAS协议

    1. 什么是CAS协议很多中文的资料都不会告诉大家CAS的全称是什么,不过一定不要把CAS当作中国科学院(China Academy of Sciences)的缩写.Google.com一下,CAS是 ...

  7. 【记录】让人淡疼的BUG之参数传送错误

    前言 面试的时候往往容易被面试官问到:“说说你遇到过的比较重大或经典的Bug有哪些,能说一说吗?”我被问时脑海的反应是:“尼玛,这个我从来没有刻意记!一时半会咋想得起来,然后还是没想起来或者是随意给了 ...

  8. asp.net中对象的序列化,方便网络传输

    对象序列化 是将对象状态转换为可保持或传输的格式的过程.反序列化 是将流转换为对象序列化和反序列化相结合 可以使对象数据轻松的存储和传递 在 .NET 中,如果是对象可序列化,需要在 声明对象的开始部 ...

  9. RPM是RedHat Package Manager(RedHat软件包管理工具)

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...

  10. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-008-带参数的ADVICE

    一. 假设有情形如:cd里有很多轨,当播放音乐时,要统计每个音轨的播放次数,这些统计操作不应放在播放方法里,因为统计不是播放音乐的主要职责,这种情况适合应用AOP. 二. 1. package sou ...