剥你网页的皮？这不是哗众取宠，也是标题党。事实就是如此。
平常状态下的页面显示:
鼠标悬浮时的页面显示:
有兴趣？那就继续往下看。
Pageear就是一个能够让你实现上面截图展示效果的javascript特效，它可以让你的网页右上角边缘，产生一个点击后”翻书”或者说”剥皮”的横幅效果，我把它叫做“果皮横幅特效”。
这个特效的好处就是能够吸引浏览者的注意，几乎没有访客会不留意到这样的特效。而且横幅在默认状态下是不显示的，那里面的广告也就不会影响到用户的阅读。可能你唯一需要考虑的是你的网页速度是否还经得起这样一个特效的折腾:)
帕兰我的博客就不敢玩，如果你不怕，那看看怎么使用它吧:
首先，下载要实现这个效果的文件:pageear.zip ,打开它后，你会看到下面的文件:
index.html是一个演示。
pageear_b.jpg是悬浮时出现的图片。
pageear_a.jpg是正常状态下的图片。
pageear_b.swf和pageear_a.swf是实现动态”剥皮效果”效果的Flash文件。
当然，不能少了最重要的两个js文件。
使用方法:
- 直接将pageear文件夹(里面包含上面提到的两个js文件、两个flash文件和两张图片)上传到你的网站服务器上，这里我拿我的网站举例一下，上传到了根目录，得到http://paranimage.com/pageear/
- 在<head>和</head>之前加入下面的代码
<script src="http://paranimage.com/pageear/AC_OETags.js" language="javascript"></script> <script src="http://paranimage.com/pageear/pageear.js" type="text/javascript"></script> - 在你需要使用果皮横幅效果的页面加入下面的代码:
<!-- PageEar function call --> <script type="text/javascript"> writeObjects(); </script> <!-- End PageEar function call --> - 注意：除了把图片替换成自己需要展示的外(注意尺寸)，还应该把图片链接改成自己的链接地址，这个链接地址在pageear.js文件内的第38行:
// URL to open on pageear click var jumpTo = 'http://www.webpicasso.de/blog/'
没有评论:
发表评论