经常会看到一些动态卷页、翻页或卷角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
素材可以自己设计或在原有的基础上进行修改。
实例代码
一,包含文件部分
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jQuery.pagePeel.js"></script>
二,HTML部分(卷页、翻页或卷角falsh显示的DIV)
- <div id="pagePeel"></div>
三,javascript部分(jQuery插件page peel AD调用)
- <script type="text/javascript">
- $().ready(function(){
- $('#pagePeel').pagePeel({ introAnim: true,adLink: 'http://www.biuuu.com/',});
- });
- </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广告效果,值得推荐。