問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]網頁右上掀角翻頁廣告



[jQuery]網頁右上掀角翻頁廣告
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

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

(Yahoo! 現在剛好沒這樣的廣告,所以先用自己的範例來當展示)

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

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

掀角翻頁圖片 500px X 500px

廣告內容圖片 500px X 500px

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

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

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

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

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

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

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

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

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

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

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

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

範例瀏覽:

http://abgne.myweb.hinet.net/jQuery/0003/0003_1.html (透明 GIF) http://abgne.myweb.hinet.net/jQuery/0003/0003_2.html (透明 PNG,建議使用非 IE 6 瀏覽器來瀏覽)

 

以上內容於2009-06-04 13:00 發表在 http://blog.xuite.net/abgne/diary1/24546232

2009/6/4 15:52
 


回覆: [jQuery]網頁右上掀角翻頁廣告
會員一級
註冊日期:
2009/6/4 22:03
留言: 1
謝謝老師。
剛好在想這個要怎麼寫。

2009/6/4 22:06
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS