Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 曼波牆廣告

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

各位也許有在Yahoo!奇摩的首頁看過有種廣告是會往下展開,然後播放個幾秒後又自動縮回去。Yahoo!奇摩好像是稱這樣的廣告效果叫「曼波牆」。常見的用法都是利用 swf 來做影格的跳轉跟舞台大小的變化,讓瀏覽者被其有趣的效果所吸引。但筆者此次要教各位如何使用 gif 圖片來做到類似的效果。

也許腦筋動的較快的同學會想到用顯示及隱藏的方式來切換大小廣告圖片,但 gif 並不是跟 swf 一樣能隨心所欲的跳到指定的影格上,因此當展開大廣告圖片時,我們要確定它是從頭開始播放,而不是已經播放到一半了。所以,如何讓大廣告從頭開始播放才是此次教學的重點。

在開始動手做之前,我們要先準備兩張圖片(圖片由黃大帥熱情提供):

未展開前的小廣告圖片


展開後的大廣告圖片


接下來就在 HTML 中準備個區塊來放置廣告:

1
2
3
4
5
6
<body>
	<div id="ad">
		<a href="http://tw.yahoo.com"><img src="abc.gif" alt="def.gif" class="show" /></a>
		<div class="control"></div>
	</div>
</body>

筆者希望一開始看到的是小廣告圖片,當瀏覽者點下展開鈕時才進行縮放的動作,因此 HTML 中放置的是小廣告圖片。因為展開及關閉的鈕都是做在廣告圖片中,所以需要用 .control 區塊來讓瀏覽者點擊使用。

再用 CSS 裝飾一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#ad {
	width: 300px;
	height: 118px;
	overflow: hidden;
	position: relative;
}
#ad a img {
	border: none;
	vertical-align: middle;
}
#ad .control {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 60px;
	height: 20px;
	line-height: 20px;
	right: 5px;
	bottom: 2px;
	cursor: pointer;
}

這邊要特別注意的是 #ad 區塊的 overflow 要設成 hidden 才行,否則當載入大圖片時會被撐開高度。而 .control 區塊則是覆蓋在展開及隱藏的位置上,但在 IE 中空白的區塊會變成中空,因此等等會用程式來幫它加上背景色及透明度。

準備好後就來看 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
58
// 避免無法正確取得選單圖片的寬高
// 因此動作延遲到 window.onload
$(window).load(function(){
	// 設定展開的動畫時間
	// 先取得要 img.show 的 src 及 alt 屬性
	// 並把用來判斷是否展開的狀態 isBig 設成 false
	// 接著先取得目前小廣告圖片的高度;大廣告圖片的高度等載入後再取得
	var speed = 800,
		img = $('#ad img.show'),
		smallSrc = img.attr('src'),
		bigSrc = img.attr('alt'),
		isBig = false,
		minHeight = img.outerHeight(),
		maxHeight;
 
	// 把 img.show 的 alt 屬性清空
	img.attr('alt', '');
	// 因為 IE 的問題,因此幫 .control 多設定背景色並透明
	$('#ad .control').css({
		backgroundColor: '#fff',
		opacity: 0
	});
 
	// 先預載並隱藏大廣告圖片至 body 中
	$('<img class="big" />').load(function(){
		// 當大廣告圖片載入後
		// 先取得大廣告圖片的高度
		maxHeight = this.height;
 
		// 幫 .control 加上 click 事件
		$('#ad .control').click(function(){
			// 如果是未展開的話
			if(!isBig){
				// IE 一開始可能無法取得大廣告圖片的高度,因此若高度小於 0 時再取一次
				if(maxHeight<=0) maxHeight = $('img.big').outerHeight();
 
				// 把 img.show 的 src 改成大廣告圖片
				$('#ad img.show').attr('src', bigSrc);
				// 慢慢展開 #ad 區塊至大廣告圖片的高度
				$('#ad').animate({
					height: maxHeight
				}, speed);
			}else{
				// 慢慢收起 #ad 區塊至小廣告圖片的高度
				$('#ad').animate({
					height: minHeight
				}, speed, function(){
					// 結束時把 img.show 的 src 改成小廣告圖片
					$('#ad img.show').attr('src', smallSrc);
				});
			}
 
			// 變更 isBig 狀態
			isBig = !isBig;
			return false;
		});
	}).attr('src', bigSrc).hide().appendTo('body');
});

大廣告圖片佔的檔案大小較大,所以當網頁載入後我們先預載大廣告圖片,當大廣告圖片載入完後再幫 .control 加上 click 事件,這樣可以避免未載完前就有瀏覽者去點擊的問題。

當瀏覽者點擊展開的時候,為了確定大廣告圖片是從頭開始播放,因此筆者就直接替換圖片位置,這樣一來圖片一定是從頭開始顯示,加上一開始有預載過了,因此載入的速度就不會受到影響。但要注意因為從小廣告伸展到大廣告是有時間差的,因此大廣告圖片的播放時差也要注意一下。



不過若連大小廣告圖片檔案都很大的話,那麼一開始可能就會載很久,因此可以先把整個 #ad 區塊都隱藏起來,等大廣告圖片載入完後再顯示出來,同時先自動展開一次來吸引瀏覽者觀看廣告。

HTML 不用做變更,只要在 CSS 中把 #ad 區塊隱藏就可以:

1
2
3
4
5
6
7
#ad {
	width: 300px;
	height: 118px;
	overflow: hidden;
	position: relative;
	display: none;	/* 先隱藏 */
}

接著就是改造程式的部份:

檢視原始碼 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// 避免無法正確取得選單圖片的寬高
// 因此動作延遲到 window.onload
$(window).load(function(){
	// 設定展開的動畫時間
	// 先取得要 img.show 的 src 及 alt 屬性
	// 並把用來判斷是否展開的狀態 isBig 設成 false
	// 小廣告圖片及大廣告圖片的高度等載入後再取得
	var speed = 800,
		img = $('#ad img.show'),
		smallSrc = img.attr('src'),
		bigSrc = img.attr('alt'),
		isBig = false,
		minHeight, maxHeight,
		// 建立一個用來控制自動關閉計時器用的 timer 及啟動時間
		timer,
		showTime = (4000 + speed);
 
	// 把 img.show 的 alt 屬性清空
	img.attr('alt', '');
	// 因為 IE 的問題,因此幫 .control 多設定背景色並透明
	$('#ad .control').css({
		backgroundColor: '#fff',
		opacity: 0
	});
 
	// 先預載並隱藏大廣告圖片至 body 中
	$('<img class="big" />').load(function(){
		// 當大廣告圖片載入後
		// 先顯示 #ad 區塊後再取得小廣告及大廣告圖片的高度
		$('#ad').show();
		minHeight = img.outerHeight();
		maxHeight = this.height;
 
		// 幫 .control 加上 click 事件
		$('#ad .control').click(function(){
			// 如果是未展開的話
			if(!isBig){
				// IE 一開始可能無法取得大廣告圖片的高度,因此若高度小於 0 時再取一次
				if(maxHeight<=0) maxHeight = $('img.big').outerHeight();
 
				// 把 img.show 的 src 改成大廣告圖片
				$('#ad img.show').attr('src', bigSrc);
				// 執行 close() 來啟動自動關閉計時器
				close();
				// 慢慢展開 #ad 區塊至大廣告圖片的高度
				$('#ad').animate({
					height: maxHeight
				}, speed);
			}else{
				// 先停止自動關閉計時器
				clearTimeout(timer);
				// 慢慢收起 #ad 區塊至小廣告圖片的高度
				$('#ad').animate({
					height: minHeight
				}, speed, function(){
					// 結束時把 img.show 的 src 改成小廣告圖片
					$('#ad img.show').attr('src', smallSrc);
				});
			}
 
			// 變更 isBig 狀態
			isBig = !isBig;
			return false;
		}).click();
	}).attr('src', bigSrc).hide().appendTo('body');
 
	// 當 img.show 加上 hover 事件
	$('#ad img.show').hover(function(){
		// 當滑鼠移到 img.show 時,停止自動關閉計時器
		clearTimeout(timer);
	}, function(){
		// 當滑鼠移出 img.show 時
		// 若現在是展開的話,則啟動自動關閉計時器
		if(isBig) close();
	});
 
	// 自動關閉計時器
	function close(){
		timer = setTimeout(function(){
			// 若現在是展開時才進行關閉
			if(isBig) $('#ad .control').click();
		}, showTime);
	}
});

各位可以試試完成後的效果,一開始廣告是會隱藏起來的,當圖片載完後才會顯示區塊出來,同時會自動展開大廣告。筆者還多加了當廣告展開後,若 N 秒沒動作的話就自動收回的功能。

範例 1 範例 2

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

26 筆針對 [jQ]用 jQuery 做廣告 – 曼波牆廣告 的迴響

    • 謝謝你的建議..
      本來設計是有幾種方向..一種是等大圖載完後才顯示出整個廣告..
      另一種是..大圖載完後點了才展開..否則就是一般的圖片連結..
      不過這樣就要動態加入那個所謂的 .control 才行..否則點到該位置就沒連結效果

  1. 您好
    我在背景部份想要換成swf檔
    但是有關他的一些標籤還是試不出來
    請問有沒有相關的作法呢謝謝!!

  2. 男丁老師,請教您一個問題,如果使用此效果,我的內容物容器是不是不可以使用絕對定位,不然當曼波牆往下展開,絕對定位的容器好像不會跟著往下移,是這樣嗎?例如

    —-是用絕對定位

發表迴響