Home » jQuery 應用

[jQ]利用滑鼠移動控制圖片預覽

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

各位應該有到所謂的網路相簿看到照片吧！不管是無名小站或是痞客邦相簿等的系統，每一本相簿中都會有多張照片，但想要全看到時就得點進去一張一張的看才行。若如果能在相簿外就把全部的縮圖都預覽過一次的話，相信對於整個使用上是有幫助的。

筆者此次就利用跟利用滑鼠移動控制商品展示相同的方式來做出能快速預覽的效果。首先來看 HTML 的部份：

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

<body>
	<div class="abgne-block-20110423">
		<ul>
			<li><a href="#"><img src="images/1s.jpg" /></a></li>
			<li><a href="#"><img src="images/2s.jpg" /></a></li>
			<li><a href="#"><img src="images/3s.jpg" /></a></li>
			<li><a href="#"><img src="images/4s.jpg" /></a></li>
			<li><a href="#"><img src="images/5s.jpg" /></a></li>
		</ul>
	</div>
</body>

當然主要來是利用 ul li 的清單方式來呈現。接著再透過 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

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
a img {
	border: none;
}
.abgne-block-20110423 {
	overflow: hidden;
	margin: 10px;
	width: 100px;	/* 圖片的寬 */
	height: 100px;	/* 圖片的高 */
	border: 1px solid #525252;
	border-radius: 10px;
}
.abgne-block-20110423 ul {
	position: relative;
}
.abgne-block-20110423 ul li {
	position: absolute;
}
 
.abgne-block-20110423 ul li a {
	display: block;
	width: 100px;	/* 圖片的寬 */
}
.abgne-block-20110423 ul li a img {
	border-radius: 10px;
}

我想這些只是簡單的 CSS 語法而已，接下來的才是重點：

檢視原始碼 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

$(function(){
	// 取得全部要處理的區塊元素
	$('.abgne-block-20110423').each(function(){
		// 取得必要的元素並用 jQuery 包裝
		// 再來取得 $li 的寬度及設定動畫時間
		var $block = $(this),  
			$ul = $block.find('ul'),
			$li = $ul.find('li'), 
			_left = $block.offset().left,
			_width = $li.find('a').width(), 
			_ratio = Math.ceil(_width / $li.length);
 
		// 除了第一張圖之外, 其它的都先隱藏
		$li.eq(0).siblings().hide();
 
		// 當滑鼠在 $block 上移動時
		$block.mousemove(function(e){
 
			// 計算要顯示那一張圖片
			var index = Math.floor((e.pageX - _left)/_ratio);
 
			$li.eq(index).show().siblings().hide();
		})
	}).find('a').focus(function(){
		this.blur();
	});
});

筆者利用滑鼠在 $block 上的移動比例來判斷要顯示那個 li，所以當在 $block 上左右移動時，就能快速的切換預覽縮圖了。

至於要移動多少才會切換則是依據你的區塊寬度及 li 數目來計算出來的囉！

範例 1

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

6 筆針對 [jQ]利用滑鼠移動控制圖片預覽 的迴響

  3. 想請問一下，如果有一千張圖，好像無法這樣使用，一開始來就會因為圖太多導致太差的電腦或是瀏覽器死掉＠＠

    不知道這樣的情況有沒有更好的作法呢？ 能變成只會載入滑鼠座標附近的圖片嗎＠＠？

    移動滑鼠的時候再慢慢載入＠＠？

    小弟初學，還請多多指教～

發表迴響