Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 網頁右上掀角翻頁廣告

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

網路頻寬越來越大，所以很多廣告效果都是用 Flash 來顯示，像常見到的網頁右上角會有一個要掀不掀，要翻不翻的廣告露出一小塊出來，然後使用者手癢把滑鼠移過去時就會整個廣告展開來。

網頁右上掀角翻頁廣告-1

雖然用 Flash 做出來的比較有聲光效果，但如果不會寫 ActionScript 或是不需要那麼炫的時候，倒是可以考慮一下使用 JavaScript 做出來的效果。什麼~怕程式太多不會寫？其實全部的程式碼並不多，讓我們一步一步來實做吧！

首先我們要準備兩張圖片，一張是真正的廣告內容圖片，而另一張則是掀角翻頁圖片：(感謝梅干桑的圖片)

掀角翻頁圖片 500px X 500px

網頁右上掀角翻頁廣告-2

廣告內容圖片 500px X 500px

網頁右上掀角翻頁廣告-3

仔細看清楚喔~廣告內容的部份只有右上角的部份，而左下角的部份是要保持透明的；而掀角翻頁的部份則是反過來，左下角是要做出翻頁的畫面，而右上角則是讓它變成透明的。

當我們把兩張圖疊在一起時就會變成

網頁右上掀角翻頁廣告-4

這樣是不是已經有掀開來的感覺了呢！接下來就是換 HTML 排版的部份：

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

<body>
	<div id="ad">
		<a href="http://www.wowgame.tw">
			<img src="peel.gif" alt="WOWGame 讓你挖不完!" />
			<span class="adBody"></span>
		</a>
	</div>
</body>

我們使用一個 DIV 區塊來當廣告的區塊，然後為了讓瀏覽者可以透過廣告來連到指定的網頁，所以就用圖片超連結的方式來顯示。但要注意的是，我們要讓掀角翻頁的圖片當主要的 IMG，而真正的廣告內容則是當成 .adBody 的 background-image。

然後使用 CSS 來讓我們的廣告區塊貼齊右上角，並讓 #ad 裡面的子元素的 position 能為 absolute 的方式來排列：

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

* {
	margin: 0;
	padding: 0;
	border: 0;
}
#ad {
	position: relative;
}
#ad img, #ad .adBody {
	position: absolute;
	width: 100px;
	height: 100px;
	right: 0;
	top: 0;
}
#ad img {
	z-index: 10;
}
#ad .adBody {
	overflow: hidden;
	background: url(adBody.gif) no-repeat right top;
}

特別注意的是這邊為了要讓掀角翻頁圖片能在廣告內容圖片的上層，所以我們使用了 z-index 的方式來提高它的階層。然後 IMG 跟 .adBody 預設的 width 跟 height 值就抓個大概的值，至少要讓廣告內容能露出一小塊為主

網頁右上掀角翻頁廣告-5

當整個版面排好後，是不是整個樣子就已經出來了呢！？再開始動作寫程式之前，先來解說一下要怎樣才能掀開那一角：

目前我們的 IMG 跟 .adBody 的 width 及 height 都是 100px，當滑鼠移進 #ad 區塊時要讓完整的廣告圖片都顯示出來，所以要讓它們的 width 及 height 都變成 500px；如果滑鼠移出後就恢復成原來的 100px 就可以了

網頁右上掀角翻頁廣告-6

了解原理之後，接下來就看我們使用 jQuery 來做出掀開的動畫效果囉：

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

$(function(){
	// 幫 #ad 加上 hover() 事件
	$("#ad").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫後再進行新的動畫
		// 圖片放大展示
		$("a img, a .adBody", this).stop().animate({
				width: 500,
				height: 500
			}, 500);
 
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫後再進行新的動畫
		// 圖片恢復原狀
		$("a img, a .adBody", this).stop().animate({
				width: 100,
				height: 100
			}, 200);
	});
});

這邊只是用到簡單的 hover() 事件跟基本的 animate() 動畫效果，另外，瀏覽者可能會在 #ad 區塊移進移出的，為了讓動畫能馬上的呈現，所以要先使用 stop() 來停止未完成的動畫後再來執行。

只要短短的十幾行就能寫出類似的掀角翻頁效果囉，各位可以瀏覽看看是否跟使用 Flash 的差異程度為何！

另外，因為要有透明的圖片效果，但 IE 6 對於透明 PNG 支援真的是爛的可以，所以我這邊的圖片是用透明 GIF 圖檔。不過跟真正使用 PNG 圖檔還是比較優，如果想讓 IE 6 支援透明 PNG 的話，可以 Google 一下 IE 6 PNG Fix 的方法。

範例 1 範例 2

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

14 筆針對 [jQ]用 jQuery 做廣告 – 網頁右上掀角翻頁廣告 的迴響

  4. 自己測試弄了一個簡單的翻書效果(不太會繪圖有點......)，http://punpersonalweb.host56.com/book/test-book.php
    ，對jquery還不算熟有些小BUG修不太掉，不知道可不可以加上判斷式
    去處理偵測的事件?

  7. 請問男丁大：
    有類似這種翻頁效果的插件嗎??

    例如有些Flash會把每個頁面，
    作出書本翻頁的那種感覺。

  8. 請問一下,這個在PC上可以完美呈現,但在行動裝置的瀏覽器上就靜止不動，沒有掀的效果。
    在PC的Chrome可以，但平板或手機的Chrome就不行耶。
    謝謝！

發表迴響