Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 中間突顯位移式的商品展示

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

現在 Adobe 已經不繼續支援開發行動裝置版的 Flash Player 了，所以就算用 Flash 做出了個很酷炫的商品展示效果，也許過不久就通通無法在行動裝置上正常瀏覽了。因此就有些主管開始把腦筋動到 JavaScript 上面，像今天要分享的效果也是某位同學問的(因為老闆指定...)。

HTML 一樣是使用 ul li 清單來列出資料：

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

<body>
	<div id="abgne-gallery-20111224">
		<a href="#previous" class="controls previous" rel="previous"></a>
		<a href="#next" class="controls next" rel="next"></a>
		<ul>
			<li><a href="#" title="Slide 1"><img src="images/a.jpg" /></a></li>
			<li><a href="#" title="Slide 2"><img src="images/b.jpg" /></a></li>
			<li><a href="#" title="Slide 3"><img src="images/c.jpg" /></a></li>
			<li><a href="#" title="Slide 4"><img src="images/d.jpg" /></a></li>
			<li><a href="#" title="Slide 5"><img src="images/e.jpg" /></a></li>
			<li><a href="#" title="Slide 6"><img src="images/f.jpg" /></a></li>
			<li><a href="#" title="Slide 7"><img src="images/g.jpg" /></a></li>
		</ul>
	</div>
</body>

接著再加上 CSS 來裝飾：

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

#abgne-gallery-20111224 {
	position: relative;
	border: 1px solid #0cf;
	background: #0cf;
	width: 960px;	/* 整個區塊的寬 */
	height: 400px;	/* 整個區塊的高 */
}
#abgne-gallery-20111224 ul {
	width: 880px;	/* 整個區塊的寬 - 兩個左右鈕的寬 */
	height: 400px;
	position: absolute;
	left: 40px;		/* 一個左鈕的寬 */
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-gallery-20111224 li a {
	outline: none;
}
#abgne-gallery-20111224 li a img {
	vertical-align: middle;
	border: none;
}
#abgne-gallery-20111224 .controls {
	position: absolute;
	top: 180px;		/* (整個區塊的高 - 自己的高) / 2 */
	display: block;
	width: 40px;
	height: 40px;
	outline: none;
	background: url(images/arrow.png) no-repeat;
}
#abgne-gallery-20111224 .previous {
	left: 0;
	background-position: -4px 0;
}
#abgne-gallery-20111224 .next {
	right: 0;
	background-position: -49px 0;
}

之前的一些範例基本上當 CSS 設定好後就能看出大概的輪廓了，但此次的範例得等到全部的程式都完成才有辦法看到最後的樣貌。所以廢話就不多說了，直接上 jQuery 囉：

檢視原始碼 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

// 當網頁載完後執行(因為要抓圖片的寬高)
$(window).load(function(){
	// 先取得相關區塊及圖片的寬高
	// 並先計算出大圖片要垂直置中所需要的 top 值
	var $gallery = $('#abgne-gallery-20111224'), 
		$frame = $gallery.find('ul'), 
		_frameHeight = $frame.height(), 
		_frameWidth = $frame.width(), 
		$li = $frame.find('li'), 
		$img = $li.find('img'), 
		_imgLength = $img.length, 
		_imgWidth = $img.width(),
		_imgHeight = $img.height(),
		_topDiff = (_frameHeight - _imgHeight) / 2, 
		_animateSpeed = 200;
 
	// 設定每張圖片縮放比例
	// _totalWidth 用來記錄寬度累加
	var resizeRatio = [ 0.6, 0.7, 0.8, 1, 0.8, 0.7, 0.6], 
		liCss = [], 
		_totalWidth = 0;
 
	// 預先算出每張圖片縮放後的總寬度
	var _m = 0;
	$img.each(function(i){ 
		_m += $(this).width() * resizeRatio[i];
	});
	// 平均分配要重疊的寬度
	var _leftDiff = Math.ceil((_m - _frameWidth) / (_imgLength - 1));
 
	// 設定每一個 li 的位置及圖片寬高
	$li.each(function(i){
		var $this = $(this), 
			_width = _imgWidth * resizeRatio[i],
			_height = _imgHeight * resizeRatio[i];
 
		liCss.push({
			height: _height, 
			width: _width, 
			left: _totalWidth  + (i == _imgLength - 1 ? 1 : 0), 
			top: _topDiff + (_imgHeight - _height) / 2, 
			zIndex: resizeRatio[i] * 10
		});
 
		$this.css(liCss[liCss.length-1]).css({
			position: 'absolute',
			border: '1px solid white'
		}).data('_index', i).find('img').css({
			width: '100%', 
			height: '100%'
		});
 
		_totalWidth += _width - _leftDiff;
	});
 
	// 當滑鼠點擊在 $gallery 中的 .controls 時
	$gallery.on('click', '.controls', function(){
		var $button = $(this);
 
		// 重新計算每一個 li 的位置及圖片寬高
		$li.each(function(){
			var $this = $(this), 
				_index = $this.data('_index');
 
			_index = ($button.hasClass('next') ? (_index - 1 + _imgLength) : (_index + 1)) % _imgLength;
			$this.data('_index', _index);
 
			$this.stop(false, true).animate(liCss[_index], _animateSpeed);
		});
 
		return false;
	});
});

要注意的是，範例中會需要抓取圖片的真實寬高，所以一定得等到圖片都載完才有辦法取得。因此程式特別寫在

檢視原始碼 JavaScript
1
2
3

$(window).load(function()){
	//code...
});

但這樣會執行時機會比較慢一點。如果不想等圖片載完的話，那麼在上面程式第 11, _imgWidth 及 _imgHeight 的部份可以手動指定，看你圖片的寬高是多少就寫死吧！

另一個要注意的是第 57 行的那個 .on() 的用法，這是 jQuery 1.7 才新增的，所以若您的專案中的 jQuery 版本若是低於 1.7 的話，得要改成

檢視原始碼 JavaScript
1
2

//$gallery.on('click', '.controls', function(){
$gallery.delegate('.controls', 'click', function(){

好啦！若沒問題的話，我們就能看到最後完成的畫面了。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
加上自動輪播功能 會員限定
另一種移動效果及加上自動輪播功能 會員限定

35 筆針對 [jQ]用 jQuery 做畫廊 – 中間突顯位移式的商品展示 的迴響

1 2

  2. 請問老師，我照著老師的範例檔的原始檔寫程式，但 左右的按鈕都一直無法顯示出來，那請問是該如何改程式呢，謝謝您

1 2

發表迴響