Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 利用滑鼠移動控制商品展示

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

有在逛日本網站的人可以會發覺到他們還蠻常整站都是用 Flash 來設計的，當然也會用到各種有趣的效果。像是利用滑鼠的移動控制商品或是作品集圖片的展示。不過一時之間也找不到有類似效果的網頁給各位看，所以咱們就直接進入主題吧。

這次的 HTML 內容很簡單：

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

<body>
	<div id="abgne-block-20110408">
		<ul>
			<li><a href="#"><img src="images/a.jpg" /></a></li>
			<li><a href="#"><img src="images/b.jpg" /></a></li>
			<li><a href="#"><img src="images/c.jpg" /></a></li>
			<li><a href="#"><img src="images/d.jpg" /></a></li>
			<li><a href="#"><img src="images/e.jpg" /></a></li>
			<li><a href="#"><img src="images/f.jpg" /></a></li>
			<li><a href="#"><img src="images/g.jpg" /></a></li>
			<li><a href="#"><img src="images/h.jpg" /></a></li>
			<li><a href="#"><img src="images/i.jpg" /></a></li>
			<li><a href="#"><img src="images/j.jpg" /></a></li>
			<li><a href="#"><img src="images/k.jpg" /></a></li>
			<li><a href="#"><img src="images/l.jpg" /></a></li>
			<li><a href="#"><img src="images/m.jpg" /></a></li>
			<li><a href="#"><img src="images/n.jpg" /></a></li>
			<li><a href="#"><img src="images/o.jpg" /></a></li>
			<li><a href="#"><img src="images/p.jpg" /></a></li>
			<li><a href="#"><img src="images/q.jpg" /></a></li>
			<li><a href="#"><img src="images/r.jpg" /></a></li>
			<li><a href="#"><img src="images/s.jpg" /></a></li>
			<li><a href="#"><img src="images/t.jpg" /></a></li>
			<li><a href="#"><img src="images/u.jpg" /></a></li>
			<li><a href="#"><img src="images/v.jpg" /></a></li>
			<li><a href="#"><img src="images/w.jpg" /></a></li>
			<li><a href="#"><img src="images/x.jpg" /></a></li>
			<li><a href="#"><img src="images/y.jpg" /></a></li>
			<li><a href="#"><img src="images/z.jpg" /></a></li>
		</ul>
	</div>
</body>

再來還是得靠 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
31

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
a img {
	border: none;
}
 
#abgne-block-20110408 {
	overflow: hidden;
	position: relative;
	width: 720px;	/* 圖片的寬 */
	height: 220px;	/* 圖片的高 */
	border: 1px solid #ccc;
}
 
#abgne-block-20110408 ul {
	width: 99999px;
	position: absolute;
}
 
#abgne-block-20110408 ul li {
	float: left;
}
 
#abgne-block-20110408 ul li a {
	display: block;
	width: 720px;	/* 圖片的寬 */
}

到這邊為主都還是蠻入門的語法，接著就是比較關鍵的 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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $li 的寬度及設定動畫時間
	var $block = $('#abgne-block-20110408'),  
		$ul = $block.find('ul'),
		$li = $ul.find('li'), 
		_width = $li.find('a').width(), 
		_left = $block.offset().left,
		_ulWidth = _width * ($li.length - 1), 
		_animateSpeed = 400;
 
	// 設定 $ul 的 width
	$ul.width(_width * ($li.length + 1));
 
	// 當滑鼠在 $block 上移動時
	$block.mousemove(function(e){
		// 計算要移動的距離
		var _dis = Math.floor((_left - e.pageX) * _ulWidth / _width);
 
		// 移動 $ul
		$ul.stop(false, true).animate({
			left: _dis < _ulWidth * -1 ? _ulWidth * -1 : _dis < 0 ? _dis : 0
		}, _animateSpeed);
	}).find('a').focus(function(){
		this.blur();
	});
});

程式並不是很複雜，主要是當滑鼠在 $block 上移動時，透過簡單的計算來控制 $ul 的移動。整個完成的效果就像這樣：



若仔細玩過的話就會發現到，要完整的顯示第一張及最後一張時是要很準確的把滑鼠移到左右兩邊上才行。不過也許是筆者手比較"殘"吧，都要移的很慢很小心才行。因此在程式中多加了偏差值的機制：

檢視原始碼 JavaScript
1
2
3
4

// 宣告
_deviation = 50;	// 距離偏差值
// 計算時
var _dis = Math.floor((_left - e.pageX + _deviation) * _ulWidth / (_width - _deviation * 2));

讓它在容許的偏差值內就能貼緊左右邊：



這樣手沒那麼巧的筆者就能完整看到第一張或是最後一張囉！程式如下：

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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $li 的寬度及設定動畫時間
	var $block = $('#abgne-block-20110408'),  
		$ul = $block.find('ul'),
		$li = $ul.find('li'), 
		_width = $li.find('a').width(), 
		_left = $block.offset().left,
		_ulWidth = _width * ($li.length - 1), 
		_animateSpeed = 400, 
		_deviation = 50;	// 距離偏差值
 
	// 設定 $ul 的 width
	$ul.width(_width * ($li.length + 1));
 
	// 當滑鼠在 $block 上移動時
	$block.mousemove(function(e){
		// 計算要移動的距離
		var _dis = Math.floor((_left - e.pageX + _deviation) * _ulWidth / (_width - _deviation * 2));
 
		// 移動 $ul
		$ul.stop(false, true).animate({
			left: _dis < _ulWidth * -1 ? _ulWidth * -1 : _dis < 0 ? _dis : 0
		}, _animateSpeed);
	}).find('a').focus(function(){
		this.blur();
	});
});
範例 1 範例 2

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

24 筆針對 [jQ]用 jQuery 做畫廊 – 利用滑鼠移動控制商品展示 的迴響

1 2

  1. 丁大～您好！
    我想請問一下你，如何把圖片滑動的animate改成easing呢？
    圖片最後會緩緩移動至最後位置這樣＠＠
    我嘗試了一些方法都沒辦法Ｔ＿Ｔ
    感謝你噢！

1 2

發表迴響