五谷粥 – 五谷和小粥的WordPress双人情侣博客

喜欢我的右上角?完美页角卷页效果pageear

小粥 发表于: June 29th, 2010 | 阅读: | 评论数: (25)

6款免费PagePeel插件-炫丽页面卷动效果

在Heson家看到了卷页效果,里面藏着Heson和他家YY的合照,羡慕的不得了~ 俺也弄了一个~~

话说 我想在里面放……婚纱照?~

下面的教程转自博译论

一、Pageear – free peel away ad

下载地址:

最新版
作者网站:

稳定版

Flash & Actionscript Developer

安装步骤:

1、下载,解压缩,7个重要文件
pageear_s.jpg(100×100 pixel)是没有展开之前挂在小边角的图片,pageear_b.jpg是展开后悬浮出现的图片(500×500 pixel),两者的图片大小你可以自己调整设置。
pageear_b.swf和pageear_s.swf是两个实现动态炫丽页面卷动效果的Flash文件。
两个JS文件:pageear.js和AC_OETags.js
一个PagePeel开启、关闭的音效文件
2、打开pageear.js文件,修改PagePeel链接地址,换成你自己想链到的地址,在38行左右。留意pageear_s.jpg、pageear_b.jpg、pageear_b.swf、pageear_s.swf的地址,如果你把文件放在其他地方或文件更名,要做相应更改。在pageear.js里还可以做其他更改。
3、上传pageear文件夹到服务器上根目录
4、别忘了pageear.js和AC_OETags.js,在<head>与</head>间加入如下代码(注意把地链接地址改成你自己的)

1
2
3
4
5
6
7
8
<head>
<script src="http://fishyoyo.ocm/AC_OETags.js"
type="text/javascript">
</script>
<script src="http://fishyoyo.com/pageear.js"
type="text/javascript">
</script>
</head>

5、在你想出现页面卷动效果的页面加入如下代码:(一般在</body>之前)

1
2
3
4
5
<body>
<script type="text/javascript">
writeObjects();
</script>
</body>

二、Add PageEar PagePeel Banner To Wordpress Blog
根据Pageear做成的wordpress插件,下载插件,上传,激活,可在后台设置一系列参数(如下图),同时的,上面步骤的4、5还需要做的:在head和body中加入相应代码

三、jQuery Page Peel

 

 

更个性:可自行设置的参数很多,安装与设置步骤无非就是修改图片、修改地址、放置代码等,在这不罗索了,具体下载与说明请移跨步到这里

四、Markit Pageear V1.4.1

有兴趣研究、开发的请到这里下载文件说明文档,很详细。

五、AdivorReadyPeel:内置PagePeel 效果的免费wordpress主题
如果是像我这样的懒2 ,想要炫丽页面卷动效果,又不想动手去设置,那就直接下载一 款内置PagePeel 效果的免费wordpress主题:AdivorReadyPeel。其实别说内置了PagePeel这款本身就很出色,值得下载。不知道大家还记不记 得,我两个月前在博译论博客上也用过PagePeel,那个代码就是借用这个主题的,修修补补用到自己的主题上面去。其实你也可以做到:下载的主题里面有 PagePeel的安装提示,按着上面用到自己的主题就行了。

六、The Sexy Curls jQuery Plugin

 

 

The Sexy Curls jQuery Plugin是基于JavaScripts的卷动页面插件。如果你已经厌烦的那种页面悬浮卷曲特效,那试试这款拖动控制卷曲效果,可以自由拖动控制展开页面的大小。
在这里看Demo1Demo2
在这里看源代码与安装说明

25 枚回复


  1. NFL Jerseys says:

    博主啥时和我们分享你们的甜蜜婚纱照啊,我先占个位哦

  2. Ansonyi says:

    o(∩_∩)o 哈哈……收藏咯…..谢谢分享……..祝福五谷和粥…七夕快乐

  3. tooba says:

    你们俩的博客太有创意了,友链存之
    五谷+粥=五谷粥,生米都做成熟饭了。
    坐等婚纱

  4. 王鑫 says:

    写的不错哈。向你学习了啊!加油哈

  5. 马路小生 says:

    同样坐等婚纱照,必须的。祝福!


发表回复


XHTML: 您可以使用如下代码:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>