男丁格爾's 脫殼玩

沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

這邊所謂的圖片拼圖化是指把圖片像拼圖一樣的切成 N 塊後再拼在一起。如果不太了解什麼是圖片拼圖化的話，讓我們先來看效果畫面

圖片拼圖化-1

圖片的來源是從挖!Game網站中拿來用的，原圖片當然是沒有格線及...缺了一塊，我們看到的畫面都是使用程式來產生的。什麼~不信，那讓我們來看 HTML 的部份：

檢視原始碼 HTML

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

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

檢視原始碼 CSS

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

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

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

檢視原始碼 JavaScript

$(function(){
	// 設定 X 及 Y 軸要切成幾塊
	var puzzleX = 10;
	var puzzleY = 8;
 
	var img = $("img.lists");
 
	// 取得 .lists 圖片的寬高
	var puzzleWidth = img.eq(0).width();
	var puzzleHeight = img.eq(0).height();
 
	// 設定 #showPuzzle 的寬高
	$("#showPuzzle").css({
		width: puzzleWidth + 1,
		height: puzzleHeight + 1
	});
 
	// 把 .lists 圖片的寬高除以要切的塊數
	// 這樣能得到每一小塊圖片的寬高
	var picW = Math.round(puzzleWidth / puzzleX);
	var 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";
			var _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("+img.eq(0).attr("src")+")",
				backgroundPosition: _posLeft + " " + _posTop
			});
 
			// 把 _span 加到 #showPuzzle 中
			$("#showPuzzle").append(_span);
		}
	}
});

雖然每一個 Span 使用的背景圖片都一樣，但透過 CSS 的 background-position 語法來達到控制背景圖片的位置，因此只要算好要移動的 X 及 Y 後，就能產生所謂的拼圖效果囉

圖片拼圖化-2

如果要像一開始看到那樣缺某幾塊圖片的話，那只要在迴圈中加入判斷就可以了，例如我要讓它缺 (3, 2) 及 (8, 6) 這兩塊：

檢視原始碼 JavaScript

// 一一產生 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";
		var _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("+img.eq(0).attr("src")+")",
			backgroundPosition: _posLeft + " " + _posTop
		});
 
		// 把 _span 加到 #showPuzzle 中
		$("#showPuzzle").append(_span);
	}
}

只是使用 continue 就能跳過指定的範圍，最後來看看效果怎樣

圖片拼圖化-3

為了讓它更有趣一點，所以我要再加入透明度的變化，當滑鼠移進移出時有不同的透明度：

檢視原始碼 JavaScript

// 一一產生 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";
		var _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("+img.eq(0).attr("src")+")",
			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 事件

圖片拼圖化-4

雖然效果看起來還蠻有趣的，不過除了拼圖遊戲之外就沒有什麼實際能運用的地方，如果各位有較好的 idea 時，希望能留言一起討論討論囉！

範例 1 範例 2

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

也許您對這些文章也有興趣

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

dai 於 2009-12-04 13:43:07 說：

請問，FLASH和GIF的檔案，有辦法拼圖化嗎??

回覆 ↓
- 男丁格爾於 2009-12-04 16:03:37 說：
  
  GIF 是可以...
  但 Flash 則要試才知道了..不保證可行
  
  回覆 ↓
vavarrm 於 2011-08-17 17:14:44 說：

IE 顯示有些問題有時候圖可以正常讀出但有時候會縮的很小一快

回覆 ↓
- 男丁格爾於 2011-08-24 09:13:05 說：
  
  我再找時間來修正及改造成其它效果。
  
  回覆 ↓

也許您對這些文章也有興趣

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

發表迴響 取消回覆

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

發表迴響取消回覆