Home » jQuery 外掛

[jQ]Rolla 1.2

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

Rolla 1.2

Rolla 算是選單效果的一種運用,可以做到當滑鼠移入移出連結時來變換圖片。不過它的使用方式很特別,假設有個連結名稱為 link,那麼會自己把該連結中加入圖片,而圖片的檔名就是 link.jpg,那麼當滑鼠移入時的替換圖片檔名則要命名為 link-on.jpg。

套件名稱:Rolla
套件版本:1.2
作者網站:http://www.bonsai.co.at/dev/rolla/
套件網址:http://plugins.jquery.com/project/Rolla
發佈日期:2008-03-25
檔案大小:2.99 KB
檔案下載:rolla-1-2.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
imgDir(選填)
描述: 影像存放的資料夾
預設值: 'images'
 
onFade(選填)
描述: 進入時的轉換速度
預設值: 'fast'
 
outFade(選填)
描述: 離開時的轉換速度
預設值: 'fast'
 
mainOpacity(選填)
描述: 轉換時的透明度(感覺不太出來效果..)
預設值: "1"
 
css(選填)
描述: 要產生效果的 className
預設值: 'rolla'

方法說明:

檢視原始碼 JavaScript
1
2
// 產生 rollaHover 效果
$.rollaHover([settings]);

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rolla-1-2.js"></script>
<style type="text/css">
	a.rolla {
		/* 圖片的寬跟高 */
		width: 80px;
		height: 80px;
	}
	img.rolla {
		border: 0;
	}
</style>
<script type="text/javascript">
	// 設定 rollaHover 時的動畫速度為 'slow'
	$(function(){
		$.rollaHover({
			onFade: 'slow',
			outFade: 'slow'
		});
	});
</script>
 
<body>
	<a href="http://jquery.com/" class="rolla">gear</a><br />
	<a href="http://jquery.com/" class="rolla">team</a>
</body>
範例 1

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

附註:
Rolla 的程式內容來看,目前應該是只支援 jpg 圖檔來產生效果的。

6 筆針對 [jQ]Rolla 1.2 的迴響

  1. 男先生你好,因為網站中剛好有兩種尺寸的按鈕200*100和50*50,因為兩個的a.rolla尺寸都一樣,但是只有一種class,造成50*50這個小按鈕感應範圍跟200*100一樣大,想請教如果要讓兩種class(比如說rolla和menula)都有這種功能的話,應該怎麼解決? (我自己為是的將js裡的css:'rolla'改為css:'rolla','menula'不過很顯然的是錯誤的,麻煩
    男先生幫忙解惑了,感謝。

  2. 站長你好
    你的程式有點問題
    如果網頁有些<a>可能會造成他錯誤
    原本
    var arr_a = jQuery.makeArray(document.getElementsByTagName("a"));
    改成
    var arr_a = jQuery.makeArray($('.'+cssClass));

    可以解決!!..
    有錯請多指教 謝謝!!..

發表迴響