Home » jQuery 應用

[jQ]六宮格圖片展示

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

很久前逛告某國際財經新聞網站，看到網頁中有個類似焦點新聞的圖片展示方式還蠻有趣的，所以就想辦法把它 A 過來跟大家分享一下。其中程式真的一點都不複雜，麻煩的是 CSS。

一樣是先來準備 HTML：

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

<body>
	<div id="abgne-20110714">
		<div class="content">
			<div class="box">
				<h3 id="abgne-title">正面照</h3>
				<a id="abgne-link" href="#"><img id="abgne-img" src="images/05.jpg" /></a>
				<div class="mask"></div>
			</div>
			<ul class="side">
				<li class="first"><a href="#"><img src="images/05.jpg" alt="正面照" /></a></li>
				<li><a href="#"><img src="images/04.jpg" alt="側面照" /></a></a></li>
			</ul>
		</div>
		<ul class="list">
			<li><a href="#"><img src="images/03.jpg" alt="正面高角度" /></a></li>
			<li><a href="#"><img src="images/02.jpg" alt="大街" /></a></li>
			<li class="last"><a href="#"><img src="images/01.jpg" alt="內部大廳照" /></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
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
74
75
76
77
78
79
80

#abgne-20110714 {
	position: relative;
	width: 288px;
	padding: 6px;
	background: #303030;
	overflow: hidden;
}
#abgne-20110714 img {
	display: block;
	border: 1px solid #666;
}
#abgne-20110714 .content {
	clear: both;
	height: 142px;
	overflow: hidden;
}
#abgne-20110714 .content .box {
	position: relative;
	width: 188px;
	float: left;
}
#abgne-20110714 .content .side {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	width: 93px;
}
#abgne-20110714 .content .side li.first {
	zoom:1;
	padding: 0 0 3px;
	*padding: 0;
}
#abgne-20110714 .box img {
	position: absolute;
	top: 0;
}
#abgne-20110714 .box h3 {
	margin: 0;
	position: absolute;
	top: 102px;
	width: 190px;
	color: #fff;
	padding: 8px 0;
	height: 22px;
	text-align: center;
	z-index: 1000;
	overflow: hidden;
}
#abgne-20110714 .box .mask {
	position: absolute;
	background: #000;
	top: 102px;
	height: 38px;
	width: 190px;
	z-index: 999;
}
#abgne-20110714 .list {
	clear: both;
	margin: 0;
	padding: 3px 0 0;
	list-style: none;
	width: 100%;
}
#abgne-20110714 .list li {
	float: left;
	width: 93px;
	padding-right: 4px;
}
#abgne-20110714 .list .last {
	padding: 0 0 0 1px;
}
#abgne-20110714 .box img {
	width: 188px;
	height: 138px;
}
#abgne-20110714 .side img, #abgne-20110714 .list img {
	width: 91px;
	height: 66px;
}

嘿~有沒有被這落落長的 CSS 給嚇到呢？當套上後就能看到差不多是完成後的效果畫面了

最後要加上的效果是，當滑鼠移到某張小圖片時，就把較大的圖片顯示出來：

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

$(function(){
	var $block = $('#abgne-20110714');
 
	// 幫 .mask 加上透明度
	$block.find('.box .mask').css('opacity', .6);
	// 當滑鼠移到小圖片時
	$block.find('ul li img').mouseover(function(){
		var $this = $(this);
 
		// 把小圖的相關資訊顯示在 .box 中
		$('#abgne-title').html($this.attr('alt'));
		$('#abgne-link').attr('src', $this.attr('href'));
		$('#abgne-img').attr('src', $this.attr('src'));
	});
});

別懷疑~程式就只有這樣就完成了 XD

接著只要搭配不同的排版及一點小修改，就能排出各種不同樣式的效果了；重點是程式都不用改的唷。

若是想要讓它能自動輪播切換的話，則要再加上計時器的功能：

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

$(function(){
	var $block = $('#abgne-20110714'), 
		$img = $block.find('ul li img'), 
		timer, speed = 3000;
 
	// 幫 .mask 加上透明度
	$block.find('.box .mask').css('opacity', .6);
	// 當滑鼠移到小圖片時
	$img.mouseover(function(e){
		$img.filter('.selected').removeClass('selected');
		var $this = $(this).addClass('selected');
 
		// 把小圖的相關資訊顯示在 .box 中
		$('#abgne-title').html($this.attr('alt'));
		$('#abgne-link').attr('href', $this.attr('href'));
		$('#abgne-img').attr('src', $this.attr('src'));
 
		if(e.pageX == undefined){
			// 啟動計時器
			timer = setTimeout(move, speed);
		}
	});
 
	// 當滑鼠移入到 $block 時
	$block.hover(function(e){
		if(e.pageX != undefined) clearTimeout(timer);
	}, function(){
		// 啟動計時器
		timer = setTimeout(move, speed);
	});
 
	// 控制輪播用
	function move() {
		var i = $img.index($img.filter('.selected'));
		$img.eq((i + 1) % $img.length).mouseover();
	}
 
	// 啟動計時器
	timer = setTimeout(move, speed);
});
範例 1 範例 2 範例 3 範例 4

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

6 筆針對 [jQ]六宮格圖片展示 的迴響

  1. 來，我們先打開jQuery的魔法指令～～～～

    南丁老師這種語調，在我們敲打code的時候，總在耳邊環繞～
    建立我們寫code思緒～～贊啦

  3. 男丁大大：
    想請問一下，這個範例如果改成「點小圖放大」＝＞「圖放大時，蓋過全部的六宮格」＝＞「點一下大圖」＝＞「大圖會縮回成原來的小圖」。
    請問應該要改那裡呢？？請指教！　謝謝！

    • 目前範例並不支援這樣的效果，如果要做到這樣的話，應該得讓圖片的座標是絕對的才能這樣。

發表迴響