Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 淡入淡出的縮圖式切換影像

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

筆者今天要介紹給各位的是有別於淡入淡出式的切換影像中的純超連結選單的效果，是利用了縮圖的方式來讓瀏覽者能更直覺性關看。

先來看含有小圖的 ul 清單及 HTML 內容：

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

<body>
	<div class="abgne-block-20110806">
		<ul>
			<li><a href="http://abgne.tw"><img src="images/P1010274.jpg" /></a></li>
			<li><a href="#"><img src="images/P1010290.jpg" /></a></li>
			<li><a href="#"><img src="images/P1010294.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

.abgne-block-20110806 {
	width: 640px;
	height: 380px;
	border: 1px solid #333;
	background: #ccc;
	position: relative;
	overflow: hidden;
}
.abgne-block-20110806 * {
	margin: 0;
	padding: 0;
	border: none;
}
.abgne-block-20110806 ul, .abgne-block-20110806 li {
	list-style: none;
}
.abgne-block-20110806 ul {
	position: absolute;
	right: 10px;
	bottom: 15px;
	z-index: 9999;
}
.abgne-block-20110806 li {
	float: left;
	margin-left: 5px;
}
.abgne-block-20110806 li a {
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid #fff;
}
.abgne-block-20110806 li a:hover {
	border: 1px solid #f9f;
}
.abgne-block-20110806 li a img {
	border: none;
}

當準備好 HTML 及 CSS 後，就能看到大概的畫面的：

需要注意的地方在於小圖片及大圖片的檔案關聯，假設小圖片檔名 P1010274.jpg 的話，那麼大圖片的檔名要存成 P1010274-normal.jpg 才行。接下來大圖片及切換的動作就都由 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

$(function(){
	// 取得 .abgne-block-20110806 及其子孫元素 li
	var $block = $('.abgne-block-20110806'), 
		$li = $block.find('li');
 
	// 從 li 中取出超連結及大圖片來產生新的內容
	var _html = '';
	$li.each(function(){
		var $this = $(this), 
			$a = $this.find('a'),  
			$thumb = $a.find('img')
 
		_html += '<a href="' + $a.attr('href') + '"><img src="' + $thumb.attr('src').replace(/(\.[^\.]+)$/, '-normal$1') + '" /></a>';
	});
 
	// 把產生的新內容加到 $block 中
	// 並先隱藏除了第一個以外的元素
	var $link = $block.append(_html).children('a').css({
		position: 'absolute', 
		opacity: 0
	}).eq(0).animate({
		opacity: 1, 
		zIndex: 10
	}).end();
 
	// 當 $li 點擊時
	$li.click(function(){
		// 顯示相對索引的 $link 並把其它的設為透明
		$link.eq($(this).index()).stop().animate({
			opacity: 1, 
			zIndex: 10
		}).siblings('a').stop().animate({
			opacity: 0, 
			zIndex: 0
		});
 
		return false;
	});
});

經過 jQuery 的加工後就，噹噹～

是不是效果還不錯呢！當點擊到大圖片時，可是會有超連結的效果的唷。若還想要把超連結的虛線框取消掉的話，再多補上一句：

檢視原始碼 JavaScript
1
2
3

$block.find('a').focus(function(){
	this.blur();
});

不過因為區塊的寬度是有限的，所以清單的數量要特別注意一下，以免縮圖超出整個區塊了。

範例 1

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

30 筆針對 [jQ]用 jQuery 做畫廊 – 淡入淡出的縮圖式切換影像 的迴響

1 2

    • 有什麼問題嗎?這範例我在上課時有教過, 當時的瀏覽器就是 IE6 了, 若有問題當時就會馬上發現哩!

  8. 男大師~~

    如果想要小張的圖顯現時 是依照大張的圖等比例縮放的話 這樣就只需要載入一張圖就好了

    有這樣的辦法嗎??

    • 這是可以的, 如果不需要淡出淡入的話, 就只要點小圖, 然後去修改大圖的 src 就可以了。
      這幾天有時間再弄一個超簡單版的XD

1 2

發表迴響