完美页角卷页效果pageear(IE-FIREFOX)

要做一个网页右上角卷页的效果,在网上找了好久,能找到一些flash效果,但是那些都是在IE下面可以,在FIREFOX下面,flash不是真正的透明的,虽然看上去是,但是会把flash下面网页的内容遮盖住,从而不能点击flash下面的按钮与文字等。

搜索中文内容怎么也找不到,只好在google上搜索英文资料。找到了一个叫pageear的东西,可以解决这个问题。下面就与大家分享一下解决方法。

一、解决思路
原理是用js调用flash,flash有两个,一个大的(pageear_b.swf)也就是展开后的效果,一个是小的(pageear_s.swf)是缩小后的效果。这两个flash文件不用作任何修改。

两个js文件,AC_OETags.js这个是调用flash的,不作修改。pageear.js这个是配置文件,是我们要修改的地方。

主要修改的地方是
1.

pagearSmallImg:小图地址
pagearSmallSwf:小flash地址
pagearBigImg:大图地址
pagearBigSwf:大flash地址
jumpTo:点击后要去的页面URL
openOnLoad:页面加载时是否自动打开卷页效果,也就是说是否自动变大,否则将会直接显示一个小的卷页效果在右上角,鼠标放上去后才会展开。

2.
thumbWidth: 小图宽度
thumbHeight:小图高度
bigWidth: 大图宽度
bigHeigh:大图高度

可以点这里下载:pageear.zip

安装方法:

一、首先下载pageear.zip ,里面包含js文件,图片文件,flash文件,解压后将pageear文件夹传到你的网站空间上。注意:此效果只能在网上看到效果,用本地localhost看不到效果。

二、根据你所传的pageear文件夹所在位置,配置pageear.js文件。如上面所介绍的。

三、在要显示的网页上加入以下代码:

<script src=”你的URL/AC_OETags.js” language=”javascript”></script>
<script src=”你的URL/pageear.js” type=”text/javascript”></script>

放在<head>与</head>之间。

<script type=”text/javascript”>
writeObjects();
</script

放到</body>上面一行。

四、保存你的网页,刷新即可看到效果。

如果你按照料上述说明操作。到现在为止,你可以成功的在网页上放这个效果了。当然根据你的需要,你可以把两个图片换成你自己的图片。

扩展:如何在wordpress上面插入此效果?

方法基本相同。只是上面的代码可以改成:
<script src=”<?php bloginfo(‘template_url’); ?>/pageear/AC_OETags.js” language=”javascript”></script>
<script src=”<?php bloginfo(‘template_url’); ?>/pageear/pageear.js” type=”text/javascript”></script>

在footer.php的</body>上面一行插入:
<script type=”text/javascript”>
writeObjects();
</script

前提是你要将pageear这个文件夹传到你的模板目录内。

好了,就说到这里,有不清楚的地方请在下面留言。希望对用到的朋友们有所帮助。

www.3code.cn 原创。转载请注明。


寒林

www.3code.cn 专注WordPress企业主题