Home » jQuery 應用

[jQ]影像左右移動突顯效果

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

好久沒有介紹新範例的，所以趁著連假時整理幾個有趣的小範例來跟大家分享一下。

首先就是 HTML：

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

<body>
	<div class="abgne-tw-20111011">
		<a class="link" href="#" title="title">
			<img src="images/P1020982.jpg" alt="img" />
		</a>
		<h3 class="title">
			<a href="#" title="title">Title</a>
		</h3>
		<div class="content">
			<p>這是一個簡短的摘要描述，只要很簡單簡單的內容即可，不需要把整篇文章都完整的輸出在這邊。</p>
			<a class="readmore" href="#" title="title">Read more</a>
		</div>
	</div>
</body>

這是最基本的圖片、標題及描述的框架，類似 blog 的文章列表一樣。緊接著來看 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

.abgne-tw-20111011 {
	overflow: hidden;
	width: 225px;
	padding: 5px;
}
.abgne-tw-20111011 img {
	position: relative;
	border: none;
	vertical-align: middle;
}
.abgne-tw-20111011 h3 {
	margin: 0;
}
.abgne-tw-20111011 a.link {
	border: 3px solid #e5e5e5;
	overflow: hidden;
	display: block;
}
.abgne-tw-20111011 h3 a {
	color: #000;
	display: block;
	text-decoration: none;
	margin: 10px 15px 8px 5px;
}
.abgne-tw-20111011 .content {
	margin: 10px 0 0 5px;
}

其它圖片的寬度是比實際上的 .abgne-tw-20111011 寬度還要大的，但筆者預設是先看到一小部份的圖片，當滑鼠移到區塊上時，才有看到剩餘的部份。當然這動作還是需要利用 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

$(window).load(function(){
	// 預設滑鼠移入或移出時的邊框顏色及移動的速度
	var _hoverInBorderColor = '#437EA1', 
		hoverOutBorderColor = '#E5E5E5', 
		_animateSpeed = 500;
 
	// 當滑鼠移入或移出 .abgne-tw-20111011 時
	$('.abgne-tw-20111011').hover(function(){
		// 先取得 .link 及其圖片
		// 並計算出要移動的距離(寬度)
		var $link = $(this).find('.link'), 
			_width = $link.width(), 
			$img = $link.find('img'), 
			_imgWidth = $img.width(), 
			_leftPosition = _width - _imgWidth;
 
		// 當滑鼠移入時顯示其它邊框顏色
		$link.stop().animate({
			borderBottomColor: _hoverInBorderColor,
			borderLeftColor: _hoverInBorderColor,
			borderRightColor: _hoverInBorderColor,
			borderTopColor: _hoverInBorderColor
		}, _animateSpeed);
 
		// 當滑鼠移入時移動圖片
		$img.stop().animate({
			left: _leftPosition
		}, _animateSpeed);
	}, function(){
		var $link = $(this).find('.link'), 
			$img = $link.find('img');
 
		// 當滑鼠移出時顯示原本的邊框顏色
		$link.stop().animate({
			borderBottomColor: hoverOutBorderColor,
			borderLeftColor: hoverOutBorderColor,
			borderRightColor: hoverOutBorderColor,
			borderTopColor: hoverOutBorderColor
		}, _animateSpeed);
 
		// 當滑鼠移出時移動圖片回原位
		$img.stop().animate({
			left: 0
		}, _animateSpeed);
	});
});

比較需要注意的是顏色動畫的部份，筆者多引用了 jQuery Color Animations 1.0 來讓 jQuery 動畫能支援顏色的部份。其餘的就只是移動圖片的 left 而已囉。

若沒任何問題的話，當滑鼠移動到區塊上就會看到圖片的移動效果囉：

是不是很簡單又實用呢！

範例 1 範例 2

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

3 筆針對 [jQ]影像左右移動突顯效果 的迴響

發表迴響