Home » jQuery 應用

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

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

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

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

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

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

掀角翻頁圖片 500px X 500px

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

廣告內容圖片 500px X 500px

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

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

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

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

這樣是不是已經有掀開來的感覺了呢!接下來就是換 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 的方式來排列:

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 預設的 widthheight 值就抓個大概的值,至少要讓廣告內容能露出一小塊為主

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

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

目前我們的 IMG.adBodywidthheight 都是 100px,當滑鼠移進 #ad 區塊時要讓完整的廣告圖片都顯示出來,所以要讓它們的 widthheight 都變成 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 做廣告 – 網頁右上掀角翻頁廣告 的迴響

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

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

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

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

發表迴響