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

在这里说说一下现在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);
});
});

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

分类:theme skill, WordPress;标签:, , , , ;收藏本文的永久链接

49 Responses to “网站RSS订阅的JQuery弹出效果实现”

  1. xiaorsz 回复此留言 2008/12/28 03:09 #comment-3911

    不错!!
    貌似用hover 也可以简单的实现!!

  2. ZH CEXO 回复此留言 2008/12/28 06:08 #comment-3915

    好玩,我一直不敢用jq,怕速度慢,以后再考虑,在你这里总能学到不少~

  3. 木木木木木 回复此留言 2008/12/28 06:20 #comment-3916

    还是学习了...

    • 小 木 回复此留言 2009/01/18 03:29 #comment-4100

      试试新的回复功能~~

    • Jinwen 回复此留言 2009/01/18 08:14 #comment-4110

      新的回复功能只是WordPress 2.7自带的,当然没有原来使用JQuery的好看呢。

  4. life97 回复此留言 2008/12/28 08:06 #comment-3921

    谢谢博主。太棒了!!!

  5. life97 回复此留言 2008/12/28 08:12 #comment-3922

    发现点问题,博主的鲜果订阅地址有错误,另外,抓虾与更多的址址调换才对。太忙了?

  6. iColor 回复此留言 2008/12/28 02:38 #comment-3910

    以前有用到过一个 收藏到... 的那种插件,但我装上一直不能实现这种弹出效果,,于是就把它删了...不知道和你说的这个是不是一个道理,我简单学习一下...

  7. Alan 回复此留言 2008/12/28 04:45 #comment-3912

    路过打酱油

  8. Sivan 回复此留言 2008/12/28 05:46 #comment-3914

    试了试,不行。水煮鱼那个收藏分享的插件这种效果就出不来。看来我的主题有问题~呵呵

  9. sfox 回复此留言 2008/12/28 06:23 #comment-3917

    @iColor: 可能是因为你主题的文件里少了类似这样的语句

  10. sfox 回复此留言 2008/12/28 06:25 #comment-3918

    @iColor @Sivan: 可能是因为你主题的文件里少了类似 这样的语句
    ps. 刚才留言用了code标签竟然不显示代码...

  11. 老时 回复此留言 2008/12/28 13:56 #comment-3925

    华丽的订阅,华丽的留言。

  12. Shawn 回复此留言 2008/12/28 07:05 #comment-3919

    代码还可以简化一下。

  13. Jinwen 回复此留言 2008/12/28 12:35 #comment-3923

    @life97: 是哦。是我太马虎了,谢谢你。

  14. sherry 回复此留言 2008/12/28 14:45 #comment-3926

    嗯,特别喜欢这种好玩的叶子上的小东西……支持支持

  15. WenYaYa 回复此留言 2008/12/29 03:49 #comment-3932

    我是WP的新手,这么详细的解释,我竟然还没有完全理解,不过我一定要应用上这个效果,因为太酷了。

  16. WenYaYa 回复此留言 2008/12/29 03:54 #comment-3933

    第三步中所指的JS文件在哪里?
    是需要我们手动创建一个新的吗?

  17. Jinwen 回复此留言 2008/12/29 11:41 #comment-3943

    @WenYaYa: 是的,如果你的主题没有加载JS,那么你就新建一个比如all.js文件,然后把代码复制进去。然后在header中加载那一个all.js文件,也就是第一步。

  18. 睡到自然醒blog 回复此留言 2008/12/29 17:21 #comment-3954

    我喜欢把订阅图标当作一种装饰,哈。

  19. freesky 回复此留言 2008/12/30 07:23 #comment-3958

    原来如,有空试试!

  20. mutang 回复此留言 2008/12/30 16:19 #comment-3967

    老大 你用的是2.7版吗? 是否适合你自己用的这套主题

  21. Jinwen 回复此留言 2008/12/30 17:38 #comment-3968

    @mutang: 我用的是2.7,但在我这个主题上并没有针对2.7的新功能的更改。

  22. 喵小可 回复此留言 2008/12/31 06:29 #comment-3970

    好东东,可以省地方了,有空试试。

  23. Johnny 回复此留言 2008/12/31 10:41 #comment-3976

    好东东,谢谢了!

  24. aunsen 回复此留言 2008/12/31 10:17 #comment-3972

    细节凸显设计!

  25. 木子 回复此留言 2008/12/31 14:03 #comment-3977

    这种方法很漂亮,一直想实现

  26. popdo 回复此留言 2009/01/01 07:36 #comment-3983

    jQuery这东西确实好用,我都东塞一个西一条。

  27. Snowyy 回复此留言 2009/01/01 07:17 #comment-3978

    据说这个主题很漂亮,一见果然如此!很清新简洁啊!

    正题,新年快乐!如果你不介意我没有为你量身定做新年贺词,那请接受这个无差别的祝福:祝你在2009年每天都能有或大或小的不常识惊喜[]~( ̄▽ ̄)~*

  28. Shawn 回复此留言 2009/01/01 07:56 #comment-3984

    新年好,祝新年更上一层楼,异国他乡也快乐!

  29. dogorgod 回复此留言 2009/01/01 11:47 #comment-3986

    @popdo: 我也是如此做法,呵呵...

  30. 浮黑 回复此留言 2009/01/02 09:08 #comment-3990

    简约,实用!
    顺祝新年好啊,呵呵。

  31. 浮黑 回复此留言 2009/01/02 09:15 #comment-3991

    这个方法除了订阅,还可用于很多地方啊。

  32. Knightby 回复此留言 2009/01/03 03:57 #comment-4000

    @浮黑: ...

  33. Centeur 回复此留言 2009/01/04 03:52 #comment-4009

    不错,对用户体验的提升确实有帮助。

  34. Kenny 回复此留言 2009/01/05 12:42 #comment-4017

    学习了,谢谢

  35. 网名 回复此留言 2009/01/07 06:30 #comment-4023

    学习 呵呵 这是好东西~!

  36. stephen 回复此留言 2009/01/08 06:01 #comment-4028

    收藏了,这个新主题会用到。。。

  37. 二手科学家 回复此留言 2009/01/12 03:24 #comment-4062

    这个确实很强悍,学习了。

  38. kent.zhu 回复此留言 2009/01/15 08:00 #comment-4076

    粉不错,收藏了

  39. nooidea 回复此留言 2009/01/15 13:30 #comment-4077

    那个 Js 添加是怎么回事阿?

    在 include里头js添加吗?

  40. Jinwen 回复此留言 2009/01/15 18:46 #comment-4080

    @nooidea: 把那个JS加到你主题中的JS文件中去;如果没有,新建一个common.js文件,把代码复制进去,然后在/head标签前增加调用。

  41. C.J. 回复此留言 2009/01/16 15:17 #comment-4087

    这个很有用 可惜已经不再做主题。。。

  42. xiaooole 回复此留言 2009/01/29 13:32 #comment-4242

    哈哈,谢谢博主分享,在这里真是学了不少的东西。

  43. Jinwen 回复此留言 2009/01/29 22:07 #comment-4243

    @xiaooole: 不客气啊,春节快乐!

  44. z.Yleo77 回复此留言 2009/02/24 12:21 #comment-4553

    问问, 设置那个全局对象是为了检测哪种状态?我感觉不用这个这也可以实现这个效果。

  45. magickyo 回复此留言 2009/03/22 20:22 #comment-5151

    不错~!学习了!谢谢

  46. lendage 回复此留言 2009/05/29 20:07 #comment-7448

    很不错,我也把我的隐藏了再说,貌似feedsky的JS赛马影响加载速度


The trackbacks and pingpacks:

  • BigMZ! » Blog Archive » 修改BOBV2相关记录 - Pingback on 09/04/19 17:24