Home » jQuery 外掛

[jQ]BlackAndWhite 0.2.7

範例 1
沒錯!只要 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 的迴響

發表迴響