Home » jQuery 應用

[jQ]影像縮放位移突顯效果

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

筆者今天要跟各位分享一個跟影像左右移動突顯效果有點類似的圖片突顯效果,讓網頁內容更能吸引瀏覽者的注意。

這邊只需要一個很簡單的 HTML

1
2
3
4
5
<body>
	<a class="abgne-zoom-out" href="http://abgne.tw">
		<img src="images/2012TaipeiCartShow_01.jpg" title="" width="250" height="164"  />
	</a>
</body>

基本上就是一個超連結加圖片的組合,接著準備等一下會用到的 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.abgne-frame-20120208 {
	position: relative;
	overflow: hidden;
}
.abgne-frame-20120208 .overlay {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;	/* 遮罩的顏色 */
}

這邊的 CSS 是接下來產生的元素會用到的,其中 .overlaybackground-color 會影響遮罩的顏色喔。
當萬事都準備好之後,再來就是輪到咱們的東風 - 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
$(function(){
	// 設定遮罩的透明度及寬高, 位移縮放值
	var _overlayOpacity = 0.5, 
		_zoomWidthDiff = 20, 
		_zoomHeightDiff = 15, 
		_marginTopDiff = -5, 
		_marginLeftDiff = -5;
 
	// 把有 a.abgne-zoom-out 元素抓出來一一改造
	$('a.abgne-zoom-out').each(function(){
		// 先取得圖片及移除包裹圖的超連結
		// 並重新加上新的外框及產生超連結遮罩
		var $this = $(this), 
			$img = $this.find('img').unwrap(),  
			$frame = $img.wrap('<div class="abgne-frame-20120208"></div>').parents('.abgne-frame-20120208'), 
			$overlay = $('<a href="'+$this.attr('href')+'" class="overlay"></a>').css('opacity', _overlayOpacity);
 
		// 設定外框的寬高跟圖片寬高一樣
		// 並加入遮罩
		$frame.css({
			width: $img.width(),
			height: $img.height()
		}).append($overlay);
 
		// 當滑鼠移入及移出遮罩時
		$overlay.hover(function(){
			// 把圖片的寬高依縮放值加大
			// 並變更 margin-left 及 margin-top
			$img.stop(false, true).animate({
				width: '+=' + _zoomWidthDiff + 'px',
				height: '+=' + _zoomHeightDiff + 'px',
				marginTop: _marginTopDiff,
				marginLeft: _marginLeftDiff
			});
 
			// 遮罩變成完全透明
			$(this).stop(false, true).animate({
				opacity: 0
			});
		}, function(){
			// 把圖片的寬高依縮放值減少
			// 並變更 margin-left 及 margin-top
			$img.stop(false, true).animate({
				width: '-=' + _zoomWidthDiff + 'px',
				height: '-=' + _zoomHeightDiff + 'px',
				marginTop: 0,
				marginLeft: 0
			});
 
			// 遮罩變成完全指定透明度
			$(this).stop(false, true).animate({
				opacity: _overlayOpacity
			});
		});
	});
});

除了把圖片寬高加大之外,還利用了 margin-leftmargin-top 的改變來造成移動的動畫效果。

是不是覺得你的視覺會隨著圖片的縮放而被引導了呢!

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
圖片效果縮小 會員限定

10 筆針對 [jQ]影像縮放位移突顯效果 的迴響

    • 對, 一些很基本簡單的動畫效果都能用 CSS3 來呈現。但如果想要 IE 系列也能有同樣效果的話...就..

  1. 請問老師
    _zoomWidthDiff = 20,
    _zoomHeightDiff = 15,
    _marginTopDiff = -5,
    _marginLeftDiff = -5;
    中的數值[20][15][-5][-5]的單位是pixel嗎

  2. 請問一下 如果我圖片是圓形,那我怎樣改變我的遮罩跟區塊成圓形的,是要再css設定嗎?還是jquery?

發表迴響