Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 滑入滑出時偽原地縮放圖片

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

之前筆者有分享過一篇N 宮格的相本畫廊展示的範例,而今天要分享的效果也是跟縮放有關,但是是在原地做一點點位移後縮放顯示。用說的可能很難懂,沒關係~對~哇~仄!(謎之音;陣頭的台語台詞是"對哇帕",這邊是"跟我做"的台語)

首先看到 HTML 的部份:

1
2
3
4
5
6
7
8
9
10
<body>
    <ul id="abgne-block-20120427">
        <li><a href="#"><img src="images/j.jpg"/></a></li>
        <li><a href="#"><img src="images/q.jpg"/></a></li>
        <li><a href="#"><img src="images/u.jpg"/></a></li>
        <li><a href="#"><img src="images/e.jpg"/></a></li>
        <li><a href="#"><img src="images/r.jpg"/></a></li>
        <li><a href="#"><img src="images/y.jpg"/></a></li>
    </ul>
</body>

就是 ul li 清單,每個項目中就是一個超連結包著一張圖片。接著加上 CSS 來讓改變一下座標的部份:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#abgne-block-20120427, #abgne-block-20120427 li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#abgne-block-20120427 {
	position: relative;
	top: 100px;
	left: 100px;
	width: 650px;	/* (圖片的寬度 +  _margin) * 數量 - _margin */
	height: 100px;	/* 圖片的高度 */
}
#abgne-block-20120427 li {
	position: absolute;
}
#abgne-block-20120427 li a img {
	border: none;
}

當套上 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
// 當圖片載入後才執行
$(window).load(function(){
	// 先取得先關區塊及圖片的寬高
	// 並設定每張圖片的邊距
	var $block = $('#abgne-block-20120427'), 
		$li = $block.find('li'), 
		$img = $li.find('img'),
		_width = $img.width(), 
		_height = $img.height(), 
		_margin = 10;
 
	// 把每一個 li 橫向排列好
	$li.each(function(i) {
		var $this = $(this), 
			_left = i * (_width + _margin);
 
		// 先把排列後的位置記錄在 .data('position') 中
		$this.css('left', _left).data('position', {
			left: _left,
			top: parseInt($this.css('top'), 10) || 0
		});
	})
});

這樣執行時就會自動的把位置排列好囉:


最後就是希望當滑鼠移到圖片上時,能把圖片放大並讓圖片的中心點位置不變:(以下是完整程式)

檢視原始碼 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
// 當圖片載入後才執行
$(window).load(function(){
	// 先取得先關區塊及圖片的寬高
	// 並設定每張圖片的邊距、縮放倍數及動畫速度
	var $block = $('#abgne-block-20120427'), 
		$li = $block.find('li'), 
		$img = $li.find('img'),
		_width = $img.width(), 
		_height = $img.height(), 
		_margin = 10, 
		_ratio = 2, 
		_speed = 400;
 
	// 把每一個 li 橫向排列好
	$li.each(function(i) {
		var $this = $(this), 
			_left = i * (_width + _margin);
 
		// 先把排列後的位置記錄在 .data('position') 中
           $this.css('left', _left).data('position', {
			left: _left,
			top: parseInt($this.css('top'), 10) || 0
		});
	}).hover(function(){	// 當滑鼠移入 $li 時
		var $this = $(this), 
			positionData = $this.data('position');
 
		// 改變 z-index 以免被遮到, 並移動 left 及 top
		// 同時找到 img 縮放寬高為原來的 _ratio 倍
		$this.css('z-index', 1).stop().animate({
			left: positionData.left - (_width * _ratio - _width) / 2,
			top: positionData.top - (_height * _ratio - _height) / 2
		}, _speed).find('img').stop().animate({
			width: _width * _ratio, 
			height: _height * _ratio
		}, _speed);
	}, function(){	// 當滑鼠移出 $li 時
		var $this = $(this), 
			positionData = $this.data('position');
 
		// 還原 z-index 並移回原來的 left 及 top
		// 同時找到 img 還原寬高
		$this.css('z-index', 0).stop().animate({
			left: positionData.left,
			top: positionData.top
		}, _speed).find('img').stop().animate({
			width: _width, 
			height: _height
		}, _speed);
	});
});

其中 _ratio 就是用來控制當滑鼠移上去時的圖片縮放比例,像範例目前是設成 2

範例 1

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

23 筆針對 [jQ]用 jQuery 做畫廊 – 滑入滑出時偽原地縮放圖片 的迴響

  1. left: positionData.left - (_width * _ratio - _width) / 2
    这句话我一直没看明白,为什么你要把宽度乘以2然后在再剪掉一半,在除以2,为什么不直接_width/2呢?

  2. 可以請教一下男丁老師

    這個寫法 可以改成先把圖片縮小 然後點擊時才讀取為原尺寸的功能嗎
    可否請老師指導學生一下
    在此要先謝謝老師您的文章 讓我開始對於JQuery有了認識及見識到它強大、迷人之處
    感謝您

    ...一個剛從here起步的JQuery 初心者

    • 這是可以的, 如果效果不變的話, 那麼最簡單的方式就是在 HTML 中先設定好你的圖片的小尺寸大小,
      以我範例來看, 也許我就指定寬高為 50 就可以試看看囉!

      • 老師果然厲害
        把學生想得超複雜的事 用很簡單的原理就提出解決方案
        我先把要顯示得圖片都裁成300×300 然後指定為寬100 高100
        這樣一來就可以完成學生想要的效果

      • 與原發問者一樣有想要列成多行的效果,在chrome上沒問題,但是發現ie上不會執行滑鼠移入li就把z-index調到最前面這個效果呢(所以第一行的圖放大後會被第二行的圖擋住)
        請問ie上是否有要做些比較特別的修改呢?謝謝:)

      • 小弟在這個網站受益良多 非常感謝站主
        剛好這邊有修改成功,希望對後面看的人有幫助~

        我用比較笨的方法 不過可以再IE正常作用

        html部分設兩組ul跟li並另取一個ul的id
        css部分將原有的全部複製一組,並將內容中的id改成剛剛新取的
        script部分同CSS作法

        如何簡化就要請教一下了

        • 把原本用 #id 的方式來設定 CSS 的部份改成 .class, 然後程式中也要一併使用 each(fn) 的方式來調整!!

  3. 男丁老師您好,
    一直是老師的忠實粉絲,
    常常來老師的網站尋求新的靈感與學習新知,
    但是一直有個問題爬文爬老半天都找不到,
    想請問老師在網站上點選"開始下載"後所跳出在頁面上的小視窗是怎麼實現的?
    看完了所有JQuery的文章,以彈跳、頁面、連結等關鍵字都搜尋不到...
    我想要將其應用在輸入帳號密碼的頁面中,一定會很棒!
    再麻煩老師指導了!
    十分感謝!

  4. 第一次發言~老師你好~
    這效果是不是在火狐瀏覽器沒效果呢?
    我用IE~Chrome都有 但是火狐沒出現效果..

  5. 老師~我有看到一個網頁效果~看他原始碼也找不出怎麼做到~~
    已經讓我找2星期了~
    http://www.shiatzychen.com/brand_story.php
    這是她的網頁~~
    我要問的是 品牌故事 那欄位~有一條類似金色 拉霸捲軸~~
    他是如何做到改變 預設拉霸 而且還可以上下拉動呢?
    是哪種語法 或是 CSS技巧呢?

  6. 老師你好

    不知道在個效果上 能不能加上 當鼠標指著圖片,圖片放大時圖片的說明出現在圖片的下方
    (彈出圖片說明是老師範例中的效果,只是學生在想能不能兩種效果累加)

發表迴響