在这里说说一下现在www.saywp.com上RSS订阅效果的实现。其实就是利用JQuery把一些详细而又占地方的订阅情况隐藏起来,然后鼠标划过时候弹出显示。我这样做其实一来是为了让Js O3这个主题更为简洁点,二来是为了让网站在YSlow的评测中更为有利而放弃直接调用Feedsky的订阅链接。
如果你也有某些原因隐藏一下RSS的详细,可以继续看下面的文章。其实这种弹出效果在NEOEASE和幸福收藏夹也是有的,我说的方法或者与他们的效果不一样,具体的看本站的订阅图标处。

实现方法:
1. 第一步当然是调用JQuery在你的header内,不想下载上传的直接用Google的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
2. 第二步是在你需要添加RSS订阅的地方添加如下代码:
<div id="rssblock">
<a id="rssfeed" href="#">rss sub</a>
<ul id="rssList">
<li>订阅到Google</li>
<li>订阅到zhuaxia</li>
<li>更多订阅</li>
</ul>
</div>
说明一下:
其中<a id="rssfeed" href="#">rss sub</a>这一句是默认显示的目标,可以是文字,如这里的“rss sub”字样;如果你希望其是图片,如本站效果,则请为id="rssfeed"这个样式定义一个背景图片,然后再来句text-indent:-999em;把文字隐藏则可;或者干脆用<img>调用图片也可。
然后<ul id="rssList">这个为默认隐藏的订阅内容,请自己 个性化,但必需有一句display:none;,否则应该隐藏的部分会隐藏不了的。上面的例子是一个列表形式的。
3. 第三步就是Javascript的代码,在你的Js文件中增加如下代码:
$(document).ready(function(){
$('#rssfeed, #rssList').mouseover(function() {
if(window.willhide) clearTimeout(window.willhide);
$('#rssList').fadeIn(500);
});
$('#rssfeed,#rssList').mouseout(function() {
window.willhide = setTimeout(function() {
$('#rssList').fadeOut(500);
}, 750);
});
});
这样就可以了,应该能实现如同本站的效果。上面代码上的数字是代表显示和隐藏内容的时间,有兴趣的可以变换一下试试。