Home » jQuery 應用

[jQ]使用前後的重疊展示效果

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

各位應該會多會少有收到從朋友的 MSN 傳來不知名的網址，通常這類的網址點了都不是什麼好康的。不過梅干昨天傳了一個網頁過來，其中有個 Flash 的效果是用來展出使用前後的比對：



使用者可以透過滑鼠的移動來控制上層圖片的寬度，這樣的效果是不是像是某功能使用前跟使用後的比對呢？看到這樣有趣的效果，怎能有不用 jQuery 來實做看看的道理呢？所以..

首先到梅干的網站再 A 幾張圖，接著把 HTML 架構排好：

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

<body>
	<div id="abgne-block-20110112">
		<div class="bd">
			<div class="info first">
				<div class="desc">著色前</div>
				<a href="#"><img src="images/2_after.jpg" /></a>
			</div>
			<div class="info">
				<div class="desc">著色後</div>
				<a href="#"><img src="images/2_before.jpg" /></a>
			</div>
		</div>
	</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
32
33

a img {
	border: none;
	vertical-align:middle;
}
#abgne-block-20110112 {
	position: relative;
	width: 600px;
	height: 420px;
	overflow: hidden;
}
#abgne-block-20110112 .bd .info {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}
#abgne-block-20110112 .bd .info .desc {
	height: 45px;
	font-size: 24px;
	line-height: 45px;
	padding-left: 10px;
	text-align: right;
	overflow: hidden;
}
#abgne-block-20110112 .bd .first .desc {
	background: #09c;
	color: #fff;
	text-align: left;
}
#abgne-block-20110112 .bd .first {
	width: 300px;
	z-index: 10;
}

完成 HTML 及 CSS 的設定之後，就能看出類似的畫面了：

通常筆者都是先把想要的效果畫面排好之後，再補上 jQuery 來使其能"動"起來：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function(){
	// 先取得 #abgne-block-20110112區塊及其寬
	var $block = $('#abgne-block-20110112'), 
		_width = $block.width();
 
	// 當滑鼠在 $block 上移動時
	$block.mousemove(function(evt){
		// 取得目前滑鼠的 x 座標
		var $this = $(this), 
			_x = evt.pageX || evt.layerX;
 
		// 計算位置使其不超出 $block
		_x = _x <= 1 ? 0 : _x >= _width - 1 ? _width : _x;
 
		// 控制 .first 區塊的寬度
		$('.first', $block).css({
			width: _x
		});
	});
});

這樣就能利用滑鼠的 x 座標來控制 .first 區塊的寬度囉：

不過這樣在移動時只能仔細的看滑鼠指針的位置，若要做到像原網頁一樣有個控制鈕的話，咱們得在 CSS 中新增：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9

/* 控制鈕 */
#abgne-block-20110111-2 span.control {
	display: block;
	width: 100%;
	height: 100%;
	background: url(images/btn.png) no-repeat center center;
	position: absolute;
	z-index: 11;
}

接著程式中就把原本用來觸發 mousemove() 事件的 $block 改成 $control：

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

$(function(){
	// 先取得 #abgne-block-20110112區塊及其寬高
	// 並加入 .control 控制鈕用的區塊
	var $block = $('#abgne-block-20110111-2'), 
		_width = $block.width(), 
		_height = $block.height(), 
		$control = $block.append('<span class="control"></span>').find('.control');
 
	// 當滑鼠在 $control 上移動時
	$control.mousemove(function(e){
		// 取得目前滑鼠的 x 及 y 座標
		var $this = $(this), 
			_x = e.pageX || e.layerX || 0,
			_y = e.pageY || e.layerY || 0;
 
		// 計算位置使其不超出 $block
		_x = _x <= 1 ? 0 : _x >= _width - 1 ? _width : _x;
		_y = _y <= 1 ? 0 : _y >= _height - 1 ? _height : _y;
 
		// 控制 .first 區塊的寬度
		$('.first', $block).css({
			width: _x
		});
 
		// 同時利用背景圖片位置的改變來移動控制鈕
		$this.css({
			backgroundPosition: (_x - 20)+"px " + (_y-20) + "px"
		});
	});
});

將將~多了個顯示用的控制鈕，是不是移動起來就更有 fu 了呢(圖片是梅干熱情提供的唷)！



啊~不過這圖片效果怎麼會讓我想到了"天蠶變"咧！

範例 1 範例 2 範例 3

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

8 筆針對 [jQ]使用前後的重疊展示效果 的迴響

    • 把相同註解的部份的程式碼改成這樣

      檢視原始碼 JavaScript
      1
2
3

      // 計算位置使其不超出 $block
var _space = 40;
_x = _x <= _space ? _space : _x >= _width - _space ? _width - _space : _x;

發表迴響