jQuery插件:Page Peel,撕页效果插件

2009-08-05 11:20:49 | 【

本插件可以以非常简单的代码实现网页右上角的撕页广告效果,just simple code!

查看演示页面 View Demo

下载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源文件.

下载"jQuery插件:Page Peel,撕页效果插件"

  • 本地下载
  • 本地下载2

相关资源