Home » jQuery 應用

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

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

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

這次的 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 來排版:

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. 喔謝謝,我搞懂了,
    之前沒專心看哈哈,
    另外可否請大大多發些利用jQuery透過AJAX來存取後端資料的例子呢?
    我想這樣jQuery會更實用喔,謝謝!^^

    • jQuery 的實用度不會因為我多寫幾個 ajax 範例而變的更好用的 XD
      Ajax 並不難, 建議可以先看看官方的範例後試試

  2. 大大,範例所放的訊6宣佈倒閉了,所以範例無法下載,可以麻煩再提供範例下載的新連結嗎?辛苦了,謝謝。

    • 暫時先請各位先直接到範例網頁中檢視原始碼後另存吧, 檔案我會一一補上, 未來可能直接租個專用的檔案空間!

  3. 感謝男丁大大的分享與解析,非常用心的文章。
    因這幾天我在研究類似的滑鼠感應控制,後來想到大大好像曾經發表過這類文章,到這裡觀摩一下,請教一下,"控制移動的距離" 這程式碼是怎麼運算出來的?因為我在國外網站也有看過這類文章,但是運算式都比較複雜。
    之後我下載範例實驗後,發現當滑鼠從中間直線往上滑入,還沒左右移動時,圖片會瞬間變換。
    也就是會根據圖片寬度自己切割A-Z字母感應區後,自動移圖。例如現在圖片是Z,但是滑鼠從最前面垂直滑入(或最左滑入),圖片會迅速移到A。
    但是這樣會有個問題,例如我滑到 P 圖後滑出,之後想繼續看 P 圖之後的圖,結果從最左側滑入,圖片又從 A 圖開始移。但是 A - O 圖我已經看過,變成使用者的一個小小問題。
    測試環境 IE8, firefox 10.0.2, chrome 17.0.963.79。
    或者這只是個範例,移動距離運算要自己算出。

    感謝解惑先。

    • 其實移動距離要怎麼算是要看你的效果是想怎樣呈現的。
      然後, 像你說的問題, 這也是要看你效果是怎樣呈現而來寫程式的。因為如果你說的, 看到 P 後移出去, 回來時想從 P 繼續往下, 可是當它想看前面的 A-O 時要怎麼做呢?

      • 我有做了一個很簡單、很簡陋(因對 javascript & Jquery 不熟)的純粹測試。但是跟大大你的顯示方式可能有點不一樣。
        假設有個顯示區域寬 500px,有條圖BAR長 1500px,內有10張小圖各寬150px。先計算滑鼠在顯示區域位置點與顯示區域的左右距離(假設各為 _mouseToL、__mouseToR),算出圖BAR超出顯示區域的左右部分後(假設各為_stockScrollIntoL 與 _stockScrollIntoR 長度),計算出每次滑鼠移動時,圖BAR位移量(各為_stockScrollIntoL/_mouseToL、_stockScrollIntoR/__mouseToR),大概就是這樣。

        只是我覺得這種滑圖效果好像用 flash 做起來比較方便。Javascript 對滑鼠感應好像比較沒那麼精準(或是沒那麼方便控制,因全部要用程式碼去控制,像是在顯示區域邊界附近細微移動會有小問題),或只是我程式碼沒寫好。

        • 在區域邊界的話, 就像我範例中還要特別處理一樣囉!!
          先撇開程式寫的好不好, 至少能達到想要的效果就是好的程式。

  4. 您好,我是js新手,看了你的那个计算公式我是否可以理解为((_left - e.pageX) / _width)* _ulWidth,即滑鼠距离左边的距离占单个a的宽度的比例再乘以_ulWidth,但我不能理解偏移量的公式:
    Math.floor((_left - e.pageX + _deviation) * _ulWidth / (_width - _deviation * 2)) 可否帮我解释下或发我邮件,谢谢啦!

    • 這個偏移主要的效果是當滑鼠移動的距離若小於某偏移值時, 則不觸發移動的效果。所以整個程式判斷才會變的這樣複雜!!

  5. 通告: 用 {JQ} 做出仿flash滑鼠左右感應輪播效果 | Digi Talker

  6. 您好!想請教南丁大大如果把顯示區域的寬度720像素改為隨視窗大小100%縮放,
    如何能讓最後一張圖剛好停在視窗右側邊界,而不會跑過頭呢?感激不盡

發表迴響