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

评论

1 楼 chenxiang105 2011-10-25  

如果不需要flash 只需要做图片的翻页效果 这个是否也合适
类似Iphone的电子书翻页, 有无推荐？
每页都是以个图片 然后左右翻页...