Home » jQuery 應用

[jQ]滾動式的長條圖片預覽

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

書讀太少，現在連想標題都有點詞窮了。回到主題，蠻多網頁 soho 族都會有所謂的作品展示頁面來展示曾經接過的案子，但每個網站頁面都長短不一，所以通常都只能截一小部份來顯示。筆者今天要教各位用另外一種方式來呈現，相信效果也許會讓案主眼睛一亮喔。

首先來看 HTML 的部份：

檢視原始碼 HTML
1
2
3
4
5
6
7

<body>
	<div class="abgne-20110711">
		<a href="http://abgne.tw" title="男丁格爾's 脫殼玩">
			<img src="images/abgne.tw_normal.png" alt="男丁格爾's 脫殼玩" />
		</a>
	</div>
</body>

接著就是稍微裝飾一下：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a img {
	border: 0;
	cursor: pointer;
	vertical-align: bottom;
}
.abgne-20110711 {
	width: 285px;
	height: 200px;
	border: 1px solid #999;
}
.abgne-20110711 a {
	display: block;
	position: relative;
	overflow: hidden;
}

排好的畫面會是看到一個很平淡無奇的超連結+圖片：

接者筆者是希望當瀏覽者把滑鼠移到圖片上時，能看到完整的長條圖片：

但是要注意的是，雖然要看到完整的長條圖片，但並不是要把整個畫面撐大喔！而是要利用滾動的方式來呈現。啥~還是不懂嗎？直接看 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

$(window).load(function(){
 
	// 淡出淡入的時間及滾動的時間倍數(越小越快)
	var _fadeInSpeed = 1000, 
		_scrollStep = 10;
 
	// .abgne-20110711 的元素全取出並一一設定
	$('.abgne-20110711').each(function(){
		// 先找出第一個超連結及其圖片
		var $a = $(this).find('a:first'),
			$img = $a.find('img'), 
			_src = $img.attr('src');
 
		// 小圖的檔名可以是 xxxx_normal,jpg, 長條圖可以是 xxxx_scroll.jpg
		// 程式會自動替換 _normal 為 _scroll, 若都是同一張圖片時, 檔名可以不用加 _normal
		_src = _src.replace('_normal', '_scroll');
 
		// 產生一個完整的長條圖片
		var $scrollImg = $('<img />').attr('src', _src).css({
			position: 'absolute', 
			display: 'none', 
			width: 'auto', 
			height: 'auto', 
			opacity: 0
		});
 
		// 把 $scrollImg 加到 $a 中, 並加上 .hover() 事件
		$a.prepend($scrollImg).hover(function(){
			// 顯示 $scrollImg 並移動到 top: 0px; 的位置
			// 同時淡入
			$scrollImg.css({
				display: 'block',
				top: 0
			}).stop(true).fadeTo(_fadeInSpeed, 1);
 
			// 算出要移動的距離及時間
			var _diff = $img.height() - $scrollImg.height(), 
				_moveTime = _diff * _scrollStep * -1;
 
			// 用來修正如果本身圖片跟要滾動的圖片高度是一樣的問題
			if(_diff==0){
				_diff = $a.parent().height() - $scrollImg.height();
				_moveTime = _diff * _scrollStep * -1;
			}
 
			// 開始滾動
			$scrollImg.css('top', 0).animate({
				top: _diff
			}, _moveTime);
		}, function(){
			// 當滑鼠移出時則停止滾動及淡出隱藏
			$scrollImg.stop(true).fadeTo(_fadeInSpeed, 0, function(){
				$scrollImg.hide();
			});
		});
	});
});

最後來預覽看看效果吧~當把滑鼠移到小圖上時...

範例 1

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

4 筆針對 [jQ]滾動式的長條圖片預覽 的迴響

  1. 請問一下!如果要在一個div上的捲頁軸上抓去動態的捲軸長度該如何去抓?因為之前抓一個套件發現它只有對在整個視窗下的捲頁軸上有辦法做動態更新!!在div小視窗上就沒有辦抓取長度值

發表迴響