Home » jQuery 外掛

[jQ]Rolla 1.2

[ 日期： | 瀏覽：6,189 | 迴響：6 ]
範例 1
請協助我把這個效果加到我的網站 (只要 500 元)
沒錯!只要 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'不過很顯然的是錯誤的，麻煩
    男先生幫忙解惑了，感謝。

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

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

發表迴響