Home » jQuery 應用

[jQ]圖片拼圖化

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

這邊所謂的圖片拼圖化是指把圖片像拼圖一樣的切成 N 塊後再拼在一起。如果不太了解什麼是圖片拼圖化的話，讓我們先來看效果畫面
jquery-puzzle-0
圖片的來源是從挖!Game網站中拿來用的，原圖片當然是沒有格線及...缺了一塊，我們看到的畫面都是使用程式來產生的。什麼~不信，那讓我們來看 HTML 的部份：

檢視原始碼 HTML
1
2
3
4
5

<body>
	<div id="showPuzzle"></div>
 
	<img src="img/wowgame.jpg" id="puzzleImg" />
</body>

HTML 的部份就只有一個 Div 及一個 Img，id 為 #showPuzzle 的是用來擺放程式所產生的圖片拼圖，而 id 為 puzzleImg 的則是我們要拿來當拼圖用的圖片囉。基本上就是這樣的簡單，當然還要加上 CSS 的修飾：

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

#showPuzzle {
	position: relative;
	background: #000;
	cursor: pointer;
	margin: 30px auto;
}
#puzzleImg {
	display: none;
}

這邊我們就把 Img 隱藏起來，並且把 #showPuzzle 的 position 設為 relative。

接下來就是很神奇的 Magic Code 囉：

檢視原始碼 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

$(window).load(function(){
	// 設定 X 及 Y 軸要切成幾塊
	var puzzleX = 10, 
		puzzleY = 8;
 
	var $puzzleImg = $('#puzzleImg'), 
		puzzleImgSrc = $puzzleImg.attr('src');
 
	// 取得 #puzzleImg 圖片的寬高
	var puzzleWidth = parseInt($puzzleImg.css('width'), 10), 
		puzzleHeight = parseInt($puzzleImg.css('height'), 10);
 
	// 設定 #showPuzzle 的寬高
	$('#showPuzzle').css({
		width: puzzleWidth + 1,
		height: puzzleHeight + 1
	});
 
	// 把 #puzzleImg 圖片的寬高除以要切的塊數
	// 這樣能得到每一小塊圖片的寬高
	var picW = Math.round(puzzleWidth / puzzleX), 
		picH = Math.round(puzzleHeight / puzzleY);
 
	// 一一產生 X 及 Y 軸的圖片
	for(var i=0;i<puzzleX;i++){
		for(var j=0;j<puzzleY;j++){
 
			// 計算該區塊的背景圖片位置
			var _posLeft = Math.round(-i * picW)+'px', 
				_posTop = Math.round(-j * picH)+'px';
 
			// 產生一個 span 區塊並指定其寬高、背景圖片
			var _span = $('<span />').css({
				position: 'absolute',
				overflow: 'hidden',
				width: picW - 1,
				height: picH - 1,
				left: i * picW + 1,
				top: j * picH + 1,
				backgroundImage: 'url(' + puzzleImgSrc + ')',
				backgroundPosition: _posLeft + ' ' + _posTop
			});
 
			// 把 _span 加到 #showPuzzle 中
			$('#showPuzzle').append(_span);
		}
	}
});

雖然每一個 Span 使用的背景圖片都一樣，但透過 CSS 的 background-position 語法來達到控制背景圖片的位置，因此只要算好要移動的 X 及 Y 後，就能產生所謂的拼圖效果囉
jquery-puzzle-1
如果要像一開始看到那樣缺某幾塊圖片的話，那只要在迴圈中加入判斷就可以了，例如我要讓它缺 (3, 2) 及 (8, 6) 這兩塊：

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

// 一一產生 X 及 Y 軸的圖片
for(var i=0;i<puzzleX;i++){
	for(var j=0;j<puzzleY;j++){
 
		// 讓 (3, 2) 及 (8, 6) 區塊都跳過
		if((i==2 && j==1) || (i==7 && j==5)) continue;
 
		// 計算該區塊的背景圖片位置
		var _posLeft = Math.round(-i * picW)+'px', 
			_posTop = Math.round(-j * picH)+'px';
 
		// 產生一個 span 區塊並指定其寬高、背景圖片及透明度
		// 並加入 hover 事件
		var _span = $('<span />').css({
			position: 'absolute',
			overflow: 'hidden',
			width: picW - 1,
			height: picH - 1,
			left: i * picW + 1,
			top: j * picH + 1,
			backgroundImage: 'url(' + puzzleImgSrc + ')',
			backgroundPosition: _posLeft + ' ' + _posTop,
			opacity: 0.3
		});
 
		// 把 _span 加到 #showPuzzle 中
		$('#showPuzzle').append(_span);
	}
}

只是使用 continue 就能跳過指定的範圍，最後來看看效果怎樣
jquery-puzzle-2
為了讓它更有趣一點，所以我要再加入透明度的變化，當滑鼠移進移出時有不同的透明度：

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

// 一一產生 X 及 Y 軸的圖片
for(var i=0;i<puzzleX;i++){
	for(var j=0;j<puzzleY;j++){
 
		// 讓 (3, 2) 及 (8, 6) 區塊都跳過
		if((i==2 && j==1) || (i==7 && j==5)) continue;
 
		// 計算該區塊的背景圖片位置
		var _posLeft = Math.round(-i * picW)+'px', 
			_posTop = Math.round(-j * picH)+'px';
 
		// 產生一個 span 區塊並指定其寬高、背景圖片及透明度
		// 並加入 hover 事件
		var _span = $('<span />').css({
			position: 'absolute',
			overflow: 'hidden',
			width: picW - 1,
			height: picH - 1,
			left: i * picW + 1,
			top: j * picH + 1,
			backgroundImage: 'url(' + puzzleImgSrc + ')',
			backgroundPosition: _posLeft + ' ' + _posTop,
			opacity: 0.3
		}).hover(function(){
			$(this).css('opacity', 1);
		}, function(){
			$(this).css('opacity', 0.3);
		});
 
		// 把 _span 加到 #showPuzzle 中
		$('#showPuzzle').append(_span);
	}
}

這邊我們沒使用 jQuery 1.3 的新功能 live()，而是在產生 Span 時就直接指定透明度跟 hover 事件
jquery-puzzle-3
雖然效果看起來還蠻有趣的，不過除了拼圖遊戲之外就沒有什麼實際能運用的地方，如果各位有較好的 idea 時，希望能留言一起討論討論囉！

範例 1 範例 2

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

4 筆針對 [jQ]圖片拼圖化 的迴響

發表迴響