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.pswp.cn/news/270435.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/270435.shtml
英文地址,請注明出處:http://en.pswp.cn/news/270435.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

電腦知識:臺式電腦如何使用無線網上網

??作者主頁&#xff1a;IT技術分享社區 ??作者簡介&#xff1a;大家好,我是IT技術分享社區的博主&#xff0c;從事C#、Java開發九年&#xff0c;對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。 ??個人榮譽&#xff1a; 數據庫領域優質創作者&#x1f3c6;&#x…

oracle的function的語法,Oracle function語法

2018-3-30 遇到需要使用SQL方法拼接字符串的情況&#xff0c;就研究了一下SQL簡單的方法應用--定義入參數[參數名 in 參數類型]create or replace function p_gettype(se_type in varchar2)--定義返回類型return varchar2isv_calling_type varchar2(45);v_called_type varchar2…

進程動態優先級調度

簡單的進程優先級動態調度 cup運行&#xff1a; 每執行一次&#xff0c;優先級減一&#xff0c;運行時間減一。 就緒隊列中的進程&#xff1a;每次按優先級降序排序&#xff08;優先級越大越優先執行&#xff09;&#xff0c;若優先級相等再按時間升序排序&#xff08;時間越小…

電腦維修:如何給筆記本電腦升級內存條

??作者主頁&#xff1a;IT技術分享社區 ??作者簡介&#xff1a;大家好,我是IT技術分享社區的博主&#xff0c;從事C#、Java開發九年&#xff0c;對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。 ??個人榮譽&#xff1a; 數據庫領域優質創作者&#x1f3c6;&#x…

php動態添加查詢,php動態添加url查詢參數的方法,php動態url參數_PHP教程

php動態添加url查詢參數的方法&#xff0c;php動態url參數本文實例講述了php動態添加url查詢參數的方法。分享給大家供大家參考。具體分析如下&#xff1a;這段代碼可以動態為url添加key-value查詢參數&#xff0c;如果參數已經存在則會用新的進行覆蓋function add_querystring…

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屬于…

php常用函數

//php curl get獲取head頭部跳轉參數function get_head($sUrl){$oCurl curl_init(); // 設置請求頭, 有時候需要,有時候不用,看請求網址是否有對應的要求$header[] "Content-type: application/x-www-form-urlencoded";$user_agent "Mozilla/5.0 (Windows NT…

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…

JavaScript對UNIX時間戳的轉換

<script type"text/javascript">   var timestamp 1479886513;   var d new Date(timestamp * 1000); //根據時間戳生成的時間對象   var date (d.getFullYear()) "-"     (d.getMonth() 1) "-"     (d.getDate())…