男丁格爾's 脫殼玩

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

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

首先看到 HTML 的部份：

<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 來讓改變一下座標的部份：

檢視原始碼 CSS

#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

// 當圖片載入後才執行
$(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

// 當圖片載入後才執行
$(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 做畫廊 – 滑入滑出時偽原地縮放圖片的迴響

feegg333 於 2012-05-04 14:16:33 說：

之前就很想試看看這個效果，感謝男丁大的分享!!

效果真棒!!

登入後再回覆
Owen 於 2012-05-09 11:11:37 說：

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

登入後再回覆
- 男丁格爾於 2012-05-09 19:42:45 說：
  
  如果把 _ratio 改成 3 的話呢?
  
  登入後再回覆
宗一郎於 2012-05-18 15:58:32 說：

可以請教一下男丁老師

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

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

登入後再回覆
- 男丁格爾於 2012-05-21 09:49:12 說：
  
  這是可以的, 如果效果不變的話, 那麼最簡單的方式就是在 HTML 中先設定好你的圖片的小尺寸大小,
  以我範例來看, 也許我就指定寬高為 50 就可以試看看囉!
  
  登入後再回覆
  - 宗一郎於 2012-05-21 15:37:46 說：
    
    老師果然厲害
    把學生想得超複雜的事用很簡單的原理就提出解決方案
    我先把要顯示得圖片都裁成300×300 然後指定為寬100 高100
    這樣一來就可以完成學生想要的效果
    
    登入後再回覆
星球於 2012-06-04 17:54:52 說：

很棒的效果
但是請問一下
如果要出現第二行要修改呢?

登入後再回覆
- 男丁格爾於 2012-06-06 08:59:50 說：
  
  你的第二行是指兩排嗎?那就...兩組 ul li 試試 XD
  
  登入後再回覆
  - fae 於 2012-06-19 14:23:23 說：
    
    與原發問者一樣有想要列成多行的效果，在chrome上沒問題，但是發現ie上不會執行滑鼠移入li就把z-index調到最前面這個效果呢（所以第一行的圖放大後會被第二行的圖擋住）
    請問ie上是否有要做些比較特別的修改呢？謝謝:)
    
    登入後再回覆
    - 男丁格爾於 2012-06-22 14:10:52 說：
      
      有修改後的範例可供我直接測試嗎?
      
      登入後再回覆
  - Dino 於 2013-09-03 15:41:12 說：
    
    小弟在這個網站受益良多非常感謝站主
    剛好這邊有修改成功,希望對後面看的人有幫助~
    
    我用比較笨的方法不過可以再IE正常作用
    
    html部分設兩組ul跟li並另取一個ul的id
    css部分將原有的全部複製一組,並將內容中的id改成剛剛新取的
    script部分同CSS作法
    
    如何簡化就要請教一下了
    
    登入後再回覆
    - 男丁格爾於 2013-09-04 23:29:33 說：
      
      把原本用 #id 的方式來設定 CSS 的部份改成 .class, 然後程式中也要一併使用 each(fn) 的方式來調整!!
      
      登入後再回覆
sophie 於 2012-06-15 18:35:08 說：

老師,請問如果每張圖都不同大小的情況下要又要等比例縮放呢?

登入後再回覆
- 男丁格爾於 2012-06-17 19:26:15 說：
  
  那...就要一一計算圖片寬高並讓圖片先排在垂直置中的位置。
  
  登入後再回覆
wum 於 2012-06-24 16:56:02 說：

會寫...語法真好，我只會單單的html.

登入後再回覆
- 男丁格爾於 2012-06-26 09:45:14 說：
  
  先學好 CSS 後再試著接觸 jQuery 吧!
  
  登入後再回覆
chia 於 2012-09-02 01:26:39 說：

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

登入後再回覆
- 男丁格爾於 2013-09-04 23:31:53 說：
  
  這只是點擊後出現一個 div 而已, 然後 div 就...設計的好看一點加上相關的元素及 css 囉!
  
  登入後再回覆
mogigi 於 2013-04-02 14:42:10 說：

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

登入後再回覆
- mogigi 於 2013-04-04 15:15:01 說：
  
  不好意思這不是問題~
  是我忘記打開 javascript...
  
  登入後再回覆
mogigi 於 2013-04-04 15:18:31 說：

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

登入後再回覆
- 男丁格爾於 2013-09-04 23:31:10 說：
  
  搜尋一下 "jQuery scrollbar" 就會有相關套件了!!
  像是 Tiny Scrollbar 也是一個能自訂捲軸的效果。
  
  登入後再回覆
宗一郎於 2015-02-04 16:58:15 說：

老師你好

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

登入後再回覆