網路頻寬越來越大,所以很多廣告效果都是用 Flash 來顯示,像常見到的網頁右上角會有一個要掀不掀,要翻不翻的廣告露出一小塊出來,然後使用者手癢把滑鼠移過去時就會整個廣告展開來。
雖然用 Flash 做出來的比較有聲光效果,但如果不會寫 ActionScript 或是不需要那麼炫的時候,倒是可以考慮一下使用 JavaScript 做出來的效果。什麼~怕程式太多不會寫?其實全部的程式碼並不多,讓我們一步一步來實做吧!
首先我們要準備兩張圖片,一張是真正的廣告內容圖片,而另一張則是掀角翻頁圖片:(感謝梅干桑的圖片)
掀角翻頁圖片 500px X 500px
廣告內容圖片 500px X 500px
仔細看清楚喔~廣告內容的部份只有右上角的部份,而左下角的部份是要保持透明的;而掀角翻頁的部份則是反過來,左下角是要做出翻頁的畫面,而右上角則是讓它變成透明的。
當我們把兩張圖疊在一起時就會變成
這樣是不是已經有掀開來的感覺了呢!接下來就是換 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 預設的 width 跟 height 值就抓個大概的值,至少要讓廣告內容能露出一小塊為主
當整個版面排好後,是不是整個樣子就已經出來了呢!?再開始動作寫程式之前,先來解說一下要怎樣才能掀開那一角:
目前我們的 IMG 跟 .adBody 的 width 及 height 都是 100px,當滑鼠移進 #ad 區塊時要讓完整的廣告圖片都顯示出來,所以要讓它們的 width 及 height 都變成 500px;如果滑鼠移出後就恢復成原來的 100px 就可以了
了解原理之後,接下來就看我們使用 jQuery 來做出掀開的動畫效果囉:
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 的方法。
這猛一看還真的以為是flash做出來的呢!!!
害我找FLASH的AS好久@@
超棒的特效!!!我喜歡~XD
想問一下~可以預設是打開的嗎!?
你的打開是完全展開嗎@@?如果是的話, 試著把 css 中 a img, a .adBody 的寬高都設成 500 後看看
感謝格爾大分享這麼酷炫的功能,又學到一些新東西囉^^
自己測試弄了一個簡單的翻書效果(不太會繪圖有點......),http://punpersonalweb.host56.com/book/test-book.php
,對jquery還不算熟有些小BUG修不太掉,不知道可不可以加上判斷式
去處理偵測的事件?
有什麼 bug?你想要判斷及偵測什麼咧?
真的很棒 最近要開始學習JQ
男丁大的部落 讓我有好多範例可以學習^^
但是頁邊是白色的,如果我去掉就會出現低下那張,如果不去掉又會有白色的正方形v_v
啥@@?不懂~
我也碰要同樣的問題!!
是因為原來的頁面不是白的...有其他的圖~~
如果展開以後會看到很大塊的白邊(在假翻頁的邊邊)
但是Peel那片圖如果去背的話一開始縮小的地方,在去背的地方會露出下方adBody.gif的邊邊...反而很奇怪...這要如何解決呢?!!!
這...其實有點麻煩..XD
請問男丁大:
有類似這種翻頁效果的插件嗎??
例如有些Flash會把每個頁面,
作出書本翻頁的那種感覺。
可以搜尋一下"turn.js"
請問一下,這個在PC上可以完美呈現,但在行動裝置的瀏覽器上就靜止不動,沒有掀的效果。
在PC的Chrome可以,但平板或手機的Chrome就不行耶。
謝謝!