Home » jQuery 外掛

[jQ]BlackAndWhite 0.2.7

[ 日期： | 瀏覽：7,564 | 迴響：3 ]
範例 1
請協助我把這個效果加到我的網站 (只要 800 元)
沒錯!只要 800 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

blackandwhite-0

it's black , it's white, whoo~，之前有分享過一篇 用 jQuery 幫圖片加上黑白效果的文章，不過因為是使用 Canvas 的關係，所以在舊版瀏覽器上就無法支援。

不過現在 BlackAndWhite 會判斷若舊版 IE 瀏覽器的話，就改用濾鏡的方式來達到同樣的功能，同時透過設定還能產生不同的彩色變黑白或是黑白變彩色的效果咧！

套件名稱：BlackAndWhite
套件網址：0.2.7
作者網站：http://gianlucaguarini.github.io/jQuery.BlackAndWhite/
套件網址：N/A
發佈日期：2013-07-10
檔案大小：2.84 KB
檔案下載：jquery.BlackAndWhite.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

hoverEffect(選填)
描述： 是否啟用 hover 效果
預設值： true
 
webworkerPath(選填)
描述： 指定實做 Web Worker 的 BnWWorker.js 位置(不包含 .js)
預設值： false
 
responsive(選填)
描述： 是否當 window 發生 resize orientationchange 時重新計算圖片尺寸
預設值： true
 
invertHoverEffect(選填)
描述： 是否反轉整個效果(預設是黑->彩色)
預設值： false
 
speed(選填)
描述： hover 時的動畫速度；可分別自訂 {fadeIn: 500, fadeOut: 500}
預設值： 500
 
onImageReady(選填)
描述： 當圖片載入後要執行的函式
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2

// 將指定區塊中的圖片加上 BlackAndWhite 效果
$(selector).BlackAndWhite(options);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.BlackAndWhite.min.js"></script>
<style type="text/css">
	.bwWrapper {
	    position: relative;
	    display: inline-block;
	}
</style>
<script type="text/javascript">
	// 當網頁內容載完時
	$(window).load(function(){
		// 將 .bwWrapper 套上 BlackAndWhite 效果
		// 預設是顯示黑白圖片, 當滑鼠移入時變成彩色
	    $('.bwWrapper').BlackAndWhite({
	        hoverEffect : true,
	        invertHoverEffect: false, 
	        speed: {
	            fadeIn: 200,
	            fadeOut: 800
	        }
	    });
	});
</script>
 
<body>
	<a href="#" class="bwWrapper">
		<img src="img/dsc_0952.jpg">
	</a>
</body>
範例 1

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

3 筆針對 [jQ]BlackAndWhite 0.2.7 的迴響

發表迴響