Home » jQuery 外掛

[jQ]jQuery Dice

範例 1
沒錯!只要 100 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

jqjquery-dice-0

十八啦~想要在網頁中也放個骰子嗎?jQuery Dice 可以很輕易的在網頁中產生骰子並在點擊後隨機產生 1 ~ 6 的喔。

套件名稱:jQuery Dice
套件網址:N/A
作者網站:http://efrane.github.com/jquery-dice/
套件網址:N/A
發佈日期:2012-05-26
檔案大小:1 KB
檔案下載:jquery.dice.min.js

參數選項說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
background(選填)
描述: 骰子的背景顏色
預設值: '#ffffff'
 
glyphSize(選填)
描述: 單一骰子的寬高;骰子必須為正方形
預設值: 40
 
glyphSrc(選填)
描述: 骰子圖片的來源
預設值: 'dice.gif'
 
juggleTimeout(選填)
描述: 骰子跳動的速度(1000毫秒 = 1秒)
預設值: 300
 
number(選填)
描述: 骰子預設的點數
預設值: 1
 
callback(選填)
描述: 當骰子的值被改變後要執行的動作
預設值: null
 
selectGlyph(選填)
描述: 用來改變骰子圖案的函式
預設值: function (number){
	var x, y;
	switch (number){
		default:
		case 1: x =                   0; y =  0;                break;
		case 2: x = 2*options.glyphSize; y =  0;                break;
		case 3: x =   options.glyphSize; y =  0;                break;
		case 4: x =   options.glyphSize; y = options.glyphSize; break;
		case 5: x = 2*options.glyphSize; y = options.glyphSize; break;
		case 6: x =                   0; y = options.glyphSize; break;
	}
	$(m_this).css('backgroundPosition', x+'px '+y+'px');
}

方法說明:

檢視原始碼 JavaScript
1
2
// 把指定的元素轉換成計算機
$(selector).approach(styles, distance, callback);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dice.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dice').dice({
			glyphSrc: 'images/dice.gif',
			background: '#ccc',
			callback: function(num){
				$('#current_number').html('點數: '+ num);
			}
		});
	});
</script>
 
<body>
	<div id="dice"></div>
	<div id="current_number">點數: N/A</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

骰子圖:
dice.gif

發表迴響