jQuery 模拟iNove右侧Rss效果

时间：2009年04月11日作者：simaopig评论次数：11

一早起来，笑容兄弟跑过来问我这款皮肤右侧的rss效果是咋实现的，

嗯。。当时就猜想可能是js的onmouseover和onmouseout效果，没有太仔细看代码。那些JS调用的地方还没找到在哪。。

残念。。。

不过用firebug看一下，原来原理应该就是这样的，因为是改变了其CSS值嘛。呵。

看一下代码

<!-- 这里是iNove皮肤 sidebar.php中的部分代码 -->
                <ul id="feed_readers">
                    <li id="google_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Google', 'inove'); ?>" href="http://fusion.google.com/add?feedurl=<?php echo $feed; ?>"><span><?php _e('Google', 'inove'); ?></span></a></li>
                    <li id="youdao_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Youdao', 'inove'); ?>" href="http://reader.youdao.com/#url=<?php echo $feed; ?>"><span><?php _e('Youdao', 'inove'); ?></span></a></li>
                    <li id="xianguo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Xian Guo', 'inove'); ?>" href="http://www.xianguo.com/subscribe.php?url=<?php echo $feed; ?>"><span><?php _e('Xian Guo', 'inove'); ?></span></a></li>
                    <li id="zhuaxia_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Zhua Xia', 'inove'); ?>" href="http://www.zhuaxia.com/add_channel.php?url=<?php echo $feed; ?>"><span><?php _e('Zhua Xia', 'inove'); ?></span></a></li>
                    <li id="yahoo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('My Yahoo!', 'inove'); ?>"  href="http://add.my.yahoo.com/rss?url=<?php echo $feed; ?>"><span><?php _e('My Yahoo!', 'inove'); ?></span></a></li>
                    <li id="newsgator_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('newsgator', 'inove'); ?>"  href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=<?php echo $feed; ?>"><span><?php _e('newsgator', 'inove'); ?></span></a></li>
                    <li id="bloglines_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Bloglines', 'inove'); ?>"  href="http://www.bloglines.com/sub/<?php echo $feed; ?>"><span><?php _e('Bloglines', 'inove'); ?></span></a></li>
                    <li id="inezha_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('iNezha', 'inove'); ?>"    href="http://inezha.com/add?url=<?php echo $feed; ?>"><span><?php _e('iNezha', 'inove'); ?></span></a></li>
                </ul>

firebug_inove_rss_html

firebug查看iNove rss效果css

firebug查看iNove rss效果css

懒得去找JS写在哪了。干脆用jQuery写一个类似的效果？哈。

定义一个样式，让一个div默认是隐藏的，嗯。之所以加了一个border完全是为了自己能看清楚。。。

#hid{display:none;border:1px solid;padding:2px 2px;}

还是套用之前jQuery教程里的代码。。（没办法，懒啊）

<a href="void(0)" id="a_hov">hover me </a>
<div id="hid">
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
</div>
    $(document).ready(function(){
        $("#a_hov").hover(function(){
            $("#hid").show(3000);
        },function(){
            $("#hid").hide(3000);
        });
    });

嘿嘿，完活，有想看完整代码的请去这里下载吧
安全无毒。嘿嘿。 :razz:

声明: 本文采用 BY-NC-SA 协议进行授权 | 小小子
转载请注明转自《jQuery 模拟iNove右侧Rss效果》

标签：分类：wordpress

您可能感兴趣的文章

11条评论
  1. cherlin留言于:2009年04月11日09:53

    踩踩也好…沙发…

    [回复]

  2. simaopig留言于:2009年04月11日10:21

    @cherlin
    呵，欢迎没事来玩。

    [回复]

  3. 笑容@1988y留言于:2009年04月11日11:26

    谢谢小小子哈..
    不过我有个问题就是你写的这个JQ为什么是慢慢显示出来的,INOVE的鼠标放上去就马上显示出来了,还有INOVE这个只有首页才会有效果,在别的页面鼠标放上去就没反应了..我用的是FF. :razz:

    [回复]

  4. simaopig留言于:2009年04月11日11:58

    @笑容@1988y
    呵呵，不客气哈。
    因为我写的代码里面我设置了隐藏和显示的时间。
    分别设为3000，你要想快点的话可以把时间改小些啊。呵。 :wink:

    [回复]

  5. simaopig留言于:2009年04月11日11:59

    其实是速度。。呵。

    [回复]

  6. LAONB留言于:2009年04月11日14:53

    不错嘛，对JS很向往，但是自己玩不明白，就多学多改了

    [回复]

  7. simaopig留言于:2009年04月11日20:59

    @LAONB
    呵，一样啊。只是瞎弄。不过JS确实很强大的说。。

    [回复]

  8. Felix留言于:2009年04月16日21:05

    支持一下

    [回复]

  9. simaopig留言于:2009年04月16日21:22

    @Felix
    哈，谢谢。。常来玩。。

    [回复]

  10. Sean[祭奠青春]留言于:2009年05月12日20:51

    这代码是不对的，这样的话鼠标一离开就直接没了 没有点击的时间！

    [回复]

  11. pyh留言于:2010年09月28日23:36

    看起来很不错，学习了

    [回复]

发表评论

*

*