• 网站RSS订阅的JQuery弹出效果实现

    分类：WordPress, theme skill | 标签： ,,,, | 浏览次数：4,584

    在这里说说一下现在www.saywp.com上RSS订阅效果的实现。其实就是利用JQuery把一些详细而又占地方的订阅情况隐藏起来，然后鼠标划过时候弹出显示。我这样做其实一来是为了让Js O3这个主题更为简洁点，二来是为了让网站在YSlow的评测中更为有利而放弃直接调用Feedsky的订阅链接。

    如果你也有某些原因隐藏一下RSS的详细，可以继续看下面的文章。其实这种弹出效果在NEOEASE和幸福收藏夹也是有的，我说的方法或者与他们的效果不一样，具体的看本站的订阅图标处。

    rss sub jquery 网站RSS订阅的JQuery弹出效果实现

    实现方法：

    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);
    });
    });

    这样就可以了，应该能实现如同本站的效果。上面代码上的数字是代表显示和隐藏内容的时间，有兴趣的可以变换一下试试。

    或者收藏到 Delicious。建议通过 RSS 订阅本站更新。你还可以 follow me 谢谢！ — by Jinwen @ 2008/12/27 20:33