男丁格爾's 脫殼玩

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

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

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

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

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

掀角翻頁圖片 500px X 500px

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

廣告內容圖片 500px X 500px

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

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

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

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

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

檢視原始碼 HTML

<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

* {
	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

$(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

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

也許您對這些文章也有興趣

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

小琉球於 2011-09-20 04:20:32 說：

這猛一看還真的以為是flash做出來的呢!!!
害我找FLASH的AS好久@@
超棒的特效!!!我喜歡~XD

回覆 ↓
gogoiven 於 2011-12-06 11:02:17 說：

想問一下~可以預設是打開的嗎!?

回覆 ↓
- 男丁格爾於 2011-12-08 13:29:14 說：
  
  你的打開是完全展開嗎@@?如果是的話, 試著把 css 中 a img, a .adBody 的寬高都設成 500 後看看
  
  回覆 ↓
小紅羊於 2012-01-23 00:46:56 說：

感謝格爾大分享這麼酷炫的功能，又學到一些新東西囉^^

回覆 ↓

也許您對這些文章也有興趣

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

發表迴響 取消回覆

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

發表迴響取消回覆