Home » jQuery 應用

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

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

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

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

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

未展開前的小廣告圖片


展開後的大廣告圖片


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

檢視原始碼 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 裝飾一下：

檢視原始碼 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 區塊隱藏就可以：

檢視原始碼 CSS
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 做廣告 – 曼波牆廣告 的迴響

1 2

  1. 老師你好!我已經把圖片名字改為abc跟def了他有自動去抓圖
    java程式碼的部分沒有去更動(需要的更動我也找不太出來)都沒有成功,
    想問老師我要以這篇去修改要注意哪邊要更改

  3. 感謝老師的提醒,我也再三檢查過了...ad's width=200px; height=79px; 不過之後改用範例1是OK的...所以我決定改用範例1的...最後,感謝老師的熱心分享...這幾天猛K老師的網站,收獲良多!!!

  4. 老師您好:範例2似乎可以吸引人注意,故想請問~~使用範例2+圖片等比例縮小時(大小圖都等比例縮小),會有上下移動的問題,今日我再試試看,發現它會不停移動,乃是不停執行"$(").load(function(){}"所致!CSS也改過了~~只要不是原來的300*118大小,都有相同的問題!功力不足,還有請老師幫忙~~~~

  6. 男丁老師 您好:
    我用按造裡說的把JS裡面的img改成swf，可是仍然沒辦法使用flash，是我語法哪裡有錯誤嗎?

1 2

發表迴響