jQuery掷骰子

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

   

js代码如下:

 1 $(function(){
 2     var dice = $("#dice");
 3     dice.click(function(){
 4         $(".wrap").append("<div id='dice_mask'></div>");//加遮罩
 5         dice.attr("class","dice");//清除上次动画后的点数
 6         dice.css('cursor','default');
 7         var num = Math.floor(Math.random()*6+1);//产生随机数1-6
 8         dice.animate({left: '+2px'}, 100,function(){
 9             dice.addClass("dice_t");
10         }).delay(200).animate({top:'-2px'},100,function(){
11             dice.removeClass("dice_t").addClass("dice_s");
12         }).delay(200).animate({opacity: 'show'},600,function(){
13             dice.removeClass("dice_s").addClass("dice_e");
14         }).delay(100).animate({left:'-2px',top:'2px'},100,function(){
15             dice.removeClass("dice_e").addClass("dice_"+num);
16             $("#result").html("您掷得点数是<span>"+num+"</span>");
17             dice.css('cursor','pointer');
18             $("#dice_mask").remove();//移除遮罩
19         });
20     });
21 });

在线演示:demo

 

转载于:https://www.cnblogs.com/hjlost/p/6101997.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/270435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑知识:台式电脑如何使用无线网上网

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

电脑维修:如何给笔记本电脑升级内存条

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

Object o = new Object()在内存中占几个字节

CAS&#xff1a; Compare and Swap&#xff0c;即比较再交换。 jdk5增加了并发包java.util.concurrent.*,其下面的类使用CAS算法实现了区别于synchronouse同步锁的一种乐观锁。JDK 5之前Java语言是靠synchronized关键字保证同步的&#xff0c;这是一种独占锁&#xff0c;也是…

MYSQL笔记:删除操作Delete、Truncate、Drop用法比较

今天小编给大家梳理一下MYSQL删除操作Delete、Truncate、Drop用法有什么区别&#xff0c;到底该如何合理使用&#xff0c;希望对大家能有帮助&#xff01;1、执行速度比较Delete、Truncate、Drop关键字都可以删除数据drop>truncate>delete2、原理方面2.1 deletedelete属于…

partition oracle用法,Oracle partition by 使用说明

--用法详解0、select * from wmg_test; ---测试数据1、select v1,v2,sum(v2) over(order by v2) as sum --按照 v2排序&#xff0c;累计nn-1....1from wmg_test;2、select v1,v2,sum(v2) over(partition by v1 order by v2) as sum --先分组&#xff0c;组内在进行…

SQLServer优化:SQLServer中NOLOCK关键字的用法介绍

目录 1、为什么SQLServer有NOLOCK关键字&#xff1f; 2、SQLServer有NOLOCK有什么问题 3、NOLOCK使用场景 4、nolock和with(nolock)的区别 5、表解锁脚本 1、为什么SQLServer有NOLOCK关键字&#xff1f; SQLServer没创建一个查询&#xff0c;都相当于创建一个查询会话&#xff…

20144303 20145239 实验三

20144303 20145239 实验三 实验内容 1、首先连接好实验箱电源&#xff0c;用串口线、并口线、网线、连接实验箱和主机 2、安装ADS并破解 安装文件在00-ads1.2目录下&#xff0c;破解方法在00-ads1.2\Crack目录下 3、安装GIVEIO驱动(安装文件在01-GIVEIO目录下) 把整个GIVEIO目录…

oracle无法创建监听器,关于Oracle net Manager中点击无法创建监听程序的解决方案

首先查看你的环境变量中是否有如果没有请添加该环境变量。变量名为&#xff1a;TNS_ADMIN 变量值为&#xff1a;E:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN;(如果你更改了默认目录&#xff0c;请找到相应的目录加进去)&#xff0c;添加完成之后&#xff0c;…

办公技巧:分享5个非常好用的Excel插件

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

weblogic安全漫谈

今天&#xff0c;我来与大家探讨一下关于weblogic的话题 在进入内网后&#xff0c;如图&#xff1a; 当我们看到7001时&#xff0c;我们就可以测试weblogic反序列化漏洞&#xff0c;如图&#xff1a; 证明&#xff0c;漏洞存在&#xff0c;查看一下权限&#xff0c;如图&#x…

linux使进程不依赖终端,Linux nohup命令应用简介--让Linux的进程不受终端影响

nohup命令应用简介--让Linux的进程不受终端影响by:授客QQ&#xff1a;1033553122#开启ping进程[rootlocalhost ~]# pinglocalhost &[2] 4169[1]Terminatednohup ping localhost[rootlocalhost ~]# PINGlocalhost (127.0.0.1) 56(84) bytes of data.64 bytes from localhost…

电脑技巧:Win10操作系统设置定时开机图解教程

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

网络技巧:想要WiFi信号满格,路由器应该这样放

现如今人手一部手机 不知不觉 WiFi也成了生活“必需品” 刷视频正入迷视频却突然卡顿 换个房间就收不到WiFi信号 如此令人抓狂的事情 生活中你一定遇到过 其实 这与路由器的错误摆放有很大关系 家庭无线路由器 放置在哪里信号最好&#xff1f; WiFi信号差如何解决&#xff1f; …

linux系统export,Linux入门进阶 - 如何在Linux中使用export命令

原标题&#xff1a;Linux入门进阶 - 如何在Linux中使用export命令来自&#xff1a; Linux迷链接&#xff1a;https://www.linuxmi.com/linux-export.htmlLinux export命令会标记哪些值需要传递给一组子进程。这是bash shell提供的一个简单但有用的特性。它允许管理员在不中断当…

Duilib开发环境搭建

1.到github上下载最新版本&#xff0c;https://github.com/duilib/duilib&#xff0c;也没有发现版本号&#xff0c;就如图所示吧 2.我只安装了VS2008&#xff0c;而github上的已经更新到VS2013了&#xff0c;所以要手动修改SIN工程文件 把sln文件打开&#xff0c;将最上面的2行…

手机技巧:手机丢了记住这四步操作,让你的损失降到最低

随着扫码支付的普及、智慧生活的升级&#xff0c;没有钱包能付账&#xff0c;没有公交卡能乘车&#xff0c;没有银行卡也能取款&#xff0c;只要你手机在手&#xff0c;手机手机钱包身份证银行卡各种支付密码。但你是否想过&#xff0c;如果某一天手机丢了&#xff0c;该怎么办…

mysql共享锁

共享锁 共享锁指的就是对于多个不同的事务&#xff0c;对同一个资源共享同一个锁。相当于对于同一把门&#xff0c;它拥有多个钥匙一样。就像这样&#xff0c;你家有一个大门&#xff0c;大门的钥匙有好几把&#xff0c;你有一把&#xff0c;你女朋友有一把&#xff0c;你们都…