本插件可以以非常简单的代码实现网页右上角的撕页广告效果,just simple code!
下载page peel插件
jQuery.pagePeel.js
本范例中还是用到了jQuery,可以点击这里下载
在网页<head>区添加以下代码
<style type="text/css">
html, body {margin:0; padding:0;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQuery.pagePeel.js"></script>
<script type="text/javascript">
$().ready(function(){
// alert ('jQuery running');
$('#pagePeel').pagePeel({
introAnim: true,
adLink: 'http://www.sharejs.com'
});
});
</script>
其中adLink为广告要链接的地址。
pagePeel是广告标签的ID,在下面的代码中定义
在网页<body>区添加以下代码
<div id="pagePeel"></div>
其他参数设置
设置广告收缩起来的宽度高度:
smallWidth: 120
smallHeight: 120
smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located
设置进入页面时的宽度和高度
introWidth: 300
introHeight:300
设置展开后的宽度和高度 (SAME AS .SWF)
bigWidth: 500
bigHeight: 500
bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located
bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located
bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory
设置广告链接地址和链接目标窗口
adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied
adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank')
设置撕页广告的位置
hPosition: 'right' // 可以用left或者right
vPosition: 'top' // 可以用top或者bottom
选择是否使用Flash
flash: true
是否使用进入时的动画效果
introAnim: false
bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file
提示: 范例中进入模式,广告处于右上角,所以Flash文件也是这么设置的,如果要修改到别的方向,请修改.fla源文件.




