jQuery插件page peel AD實現動態卷頁、翻頁或卷角flash廣告效果

經常會看到一些動態卷頁、翻頁或卷角flash廣告，其實質是使用javascript控制大小不同的flash廣告，通過CSS樣式z-index將大小不同的flash廣告層疊在不同層，使用鼠標事件mouseover、mouseout觸發實現動態卷頁、翻頁或卷角效果，同時需要大小不同的flash廣告和圖片素材，這裏介紹一個jQuery插件page peel AD，只需要幾行代碼就能輕鬆實現動態卷頁、翻頁或卷角flash廣告效果。

使用說明
一，需要使用jQuery庫文件和page peel AD庫文件(目前版本1.1.1)

二，素材準備(可自己設計不同大小的flash廣告)，如下圖

1，3個flash文件
(1)page-peel-small.swf小flash廣告，如下圖：

(2)page-peel-intro.swf頁面加載後自動提示的flash介紹廣告，如下圖：

(3)page-peel-big.swf  卷頁、翻頁或卷角大flash廣告，如下圖：

2，3張flash加載的圖(查看上面文件列表)
bigAd.jpg
introAd.jpg
smallAd.jpg

3，輔助圖片(查看上面文件列表)
page.png
bigBG.png
smallBG.png

素材可以自己設計或在原有的基礎上進行修改。

實例代碼

一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jQuery.pagePeel.js"></script>

二，HTML部分(卷頁、翻頁或卷角falsh顯示的DIV)

1. <div id="pagePeel"></div>

三，javascript部分(jQuery插件page peel AD調用)

1. <script type="text/javascript">
2. $().ready(function(){
3. $('#pagePeel').pagePeel({ introAnim: true,adLink: 'http://www.biuuu.com/',});
4. });
5. </script>

四，用戶自定義配置
用戶可自定義3種flash廣告的大小，位置，廣告鏈接地址，是否顯示介紹廣告flash等，具體可查看jQuery.pagePeel.js庫文件，詳細配置如下：

1，設置小flash廣告寬度，高度，背景圖，圖片廣告，flash
smallWidth: 100,
smallHeight: 100,
smallBG: 'pp-src/smallBG.png',
smallAd: 'pp-src/smallAd.jpg',
smallSWF: 'pp-src/page-peel-small.swf',

2，設置介紹flash廣告寬度，高度，圖片廣告，flash
introWidth: 300,
introHeight:300,
introAd: 'pp-src/introAd.jpg',
introSWF: 'pp-src/page-peel-intro.swf',

3，設置大flash廣告寬度，高度，背景圖，圖片廣告，flash
bigWidth: 500,
bigHeight: 500,
bigBG: 'pp-src/bigBG.png',
bigAd: 'pp-src/bigAd.jpg',
bigSWF: 'pp-src/page-peel-big.swf',

4，設置卷頁、翻頁或卷角flash顯示位置
hPosition: 'right', 可選值 'left' 或 'right'
vPosition: 'top', 可選值 'top' 或 'bottom'

5，是否顯示flash
flash: true,

6，是否顯示介紹flash廣告
introAnim: false,

7，設置卷頁、翻頁或卷角flash廣告鏈接地址
adLink: 'blank'

五，用戶自定義效果設置實例
1，不顯示介紹flash廣告
$('#pagePeel').pagePeel({ introAnim: flash,adLink: 'http://www.biuuu.com/',});

2，設置大flash廣告寬度和高度
$('#pagePeel').pagePeel({ bigWidth: 600,bigHeight: 600,introAnim: true,adLink: 'http://www.biuuu.com/',});

3，設置小flash廣告寬度和高度
$('#pagePeel').pagePeel({ smallWidth: 50,smallHeight: 50,introAnim: true,adLink: 'http://www.biuuu.com/',});

其它自定義設置可自行擴展，結合上面分析可知，只需要素材準備完備，使用jQuery插件page peel AD輕鬆實現動態卷頁、翻頁或卷角flash廣告效果，值得推薦。

點我下載jQuery插件page peel AD