Home » jQuery 應用

[jQ]用 jQuery 幫圖片加上黑白效果

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

常有同學上到 jQuery 時會問說：「有沒有辦用讓圖片變黑白或是變暗呢？」。最簡單的方式就是利用改變透明度來做出類似的效果。

假設有個簡單的 HTML 及 CSS：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
.black-div {
	width: 426px;
	height: 640px;
}
</style>
 
<body>
	<div class="black-div">
		<img src="images/nami.jpg" />
	</div>
</body>

那麼我們再用 jQuery 來幫圖片加上 opacity 的樣式：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

$(function(){
	// 預設的透明度值
	var _opacity = 0.3;
 
	// 讓 .black-div img 的透明度為預設的透明度值
	$('.black-div img').css('opacity', _opacity);
});

不過這樣大多是得到一個透明的效果圖片而已：



應該跟各位想要的變"暗"有一段差距吧~別擔心，只要在 .black-div 的 CSS 中多補上一段 background-color 即可：

檢視原始碼 CSS
1
2
3
4
5

.black-div {
	background: black;
	width: 426px;
	height: 640px;
}

這樣出來的圖片就會有"暗"的fu了~


利用圖片透明後會穿透的效果，只要讓背景顏色設為黑色就有"暗"的感覺。但如果無法變更背景顏色的話呢~

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style type="text/css">
.mask-div {
	position: relative;
	width: 426px;
	height: 640px;
}
 
.mask-div img {
	position: absolute;
}
 
.mask-div .cover-mask {
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 100%;
}
</style>
 
<body>
	<div class="mask-div">
		<img src="images/nami.jpg" />
	</div>
</body>

接著動態產生一個遮罩插入並蓋住圖片：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10

$(function(){
	// 預設的透明度值
	var _opacity = 0.7;
 
	// 在 .mask-div 中加入一個遮罩用的 .cover-mask, 並設定其透明度為預設的透明度值
	// 接著加入 .hover() 事件
	$('.mask-div').append('<div class="cover-mask"></div>').find('.cover-mask').css({
		opacity: _opacity
	});
});

這樣也能達到同等效果囉！不過~不過這都只是偷吃步，如果真的要讓它從彩色變黑白的話，得使用 HTML5 中的 Canvas 的功能才行。一樣先準備個 HTML：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style type="text/css">
.canvas-div {
	position: relative;
	width: 426px;
	height: 640px;
}
 
.canvas-div img {
	position: absolute;
}
</style>
 
<body>
	<div class="canvas-div">
		<img src="images/nami.jpg" />
	</div>
</body>

接著...以下的語法只有支援 Canvas 的瀏覽器才能執行：

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

$(window).load(function(){
	// 把每一個 .canvas-div 中的圖片都做轉黑白的處理
	$('.canvas-div').each(function(){
		// 先取得一些必要的參數, 例如寬高及要轉黑白的圖片
		// 同時先產生一個 canvas 元素
		var $this = $(this),
			_width = $this.width(),
			_height = $this.height(), 
			$canvas = $('<canvas></canvas>').css('position', 'absolute'),
			canvasE = $canvas[0], 
			$img = $this.find('img');
 
		// 設定 canvas 的寬高後加到 .canvas-div 中
		canvasE.width = _width;
		canvasE.height = _height;
		$this.append($canvas);
 
		// 把圖片畫在 canvas 上
		var context = canvasE.getContext('2d');
		context.drawImage($img[0], 0, 0, _width, _height);
 
		// 變更圖片的每一點的值
		var imgd = context.getImageData(0, 0, _width, _height);
		var pix = imgd.data;
		for(var i=0, n=pix.length; i<n; i+=4){
			var gray = pix[i] * 0.3 + pix[i+1] * 0.59 + pix[i+2] * 0.11;
			pix[i] = gray;
			pix[i+1] = gray;
			pix[i+2] = gray;
		}
		context.putImageData(imgd, 0, 0);
	});
});

經過這樣轉換後得到的圖片就是真正的黑白的了。

範例 1 範例 2 範例 3

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

8 筆針對 [jQ]用 jQuery 幫圖片加上黑白效果 的迴響

  3. 連結好像只能加在
    不能用 包住圖層使用href做連結~~~
    老師有解嗎....

    我適用onclick事件做觸發的
    onClick="javascript:window.open('link')"

發表迴響