2007.11 03

用javascript个性化RSS按钮

标签: , ,
JavaScript

      首先，必须告诉你的是，这简单到即使你什么都不懂，也可以制造出这样的效果。而为什么会想要这样的效果，则是因为他不占空间，也美观。可以让你的读者喜欢上你RSS按键的显示方式，甚至订阅你。

      自从那天从弥缝那里看到他修改的RSS订阅按钮之后，就感觉非常喜欢，只是一直没有下手去弄。后来，又从北极冰仔中知道了用 JavaScript 实现鼠标悬停时展开的菜单是怎样做的，所以，才会有了今天这个效果，具体的可以看我侧边栏上的RSS图标，把鼠标放上去，你就知道效果了。

      而具体是怎么做的呢？很简单。以下是北极冰仔提供的代码：

# JavaScript代码：

  1. <script type="text/javascript">
  2. function popMenu(objId) {
  3. var obj = document.getElementById(objId);
  4. if (obj.style.display == 'none') {
  5. obj.style.display = 'block';
  6. } else {
  7. obj.style.display = 'none';
  8. }
  9. }
  10. </script>

 

# 在页面中使用：

<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
<!-- 在这一行中加入你的RSS图片或文字 -->
<ul id="menuLists" style="display:none;">
<!-- 下面li中显示的是你所想要加入的RSS订阅图标或文字 -->
<li>菜单列表内容</li>
<li>菜单列表内容</li>
<li>菜单列表内容</li>
</ul>
</div>

      具体的使用方法是：把JavaScript代码加入到你的header或其他能够全站显示的地方，比如侧边栏也可以。然后，把在页面中显示的代码加入到你想实现效果的地方。比如文章后、侧边栏。这样，OK，你已经实现了这样的效果了，不错吧？

      难道还不简单？如果还有什么疑问，就给我留言或者联系我吧！

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » JavaScript »

42

  1. 2007.11.03 12:52 pm
    keke(visit): [回复]

    对啊，即不占空间又美观，空下了整整。。。。

  2. 2007.11.03 1:01 pm
    sofish(visit): [回复]

    @keke:呵呵,OK,大家整了之后我都去看看效果,再相互学习,一定可以做得更好看滴^_^…

  3. 2007.11.03 1:49 pm
    弥缝(visit): [回复]

    你这个效果好一些～

  4. 2007.11.03 2:43 pm
    漫步(visit): [回复]

    啊哦. sofish 继续努力学习 js 哈…js 很好玩的

  5. 2007.11.03 3:06 pm
    loson(visit): [回复]

    sofish真是好同志，想整这个功能很久了，只是我还是做不出来这效果啊，好人做到底，能来个WP的widget吗？呵呵，造福用WP的兄弟啊。还有你那个i support RSS那个ICON也不错啊。。呵呵

  6. 2007.11.03 3:09 pm
    sofish(visit): [回复]

    @弥缝:哈哈,你的应该是CSS实现的吧,图标是从你那里抓来滴…

    @漫步:本来不应该让漫步看的,因为漫步是js高手…哈哈…

    @loson:widget 的话就要涉及到PHP了,如果那天有空我去研究一下…呵呵…

  7. 2007.11.03 3:56 pm
    漫步(visit): [回复]

    我可不是什么高手，只是稍微懂一点皮毛而已，工作需要。。

  8. 2007.11.03 5:08 pm
    sofish(visit): [回复]

    @漫步:别被这个家伙骗了…大家追打…有什么问题全部都问漫步…JS方面的,一定搞定^_^…

  9. 2007.11.03 5:12 pm
    凯尔(visit): [回复]

    不错的。CSS + js （+ Ajax） 等于和Flash媲美的Web应用。

  10. 2007.11.03 5:42 pm
    sofish(visit): [回复]

    @kael:哈哈,看来我要多多学习才行啊…

  11. 2007.11.03 6:27 pm
    kerby(visit): [回复]

    好方法，我已经向72松推荐了你的书签插件，希望他们能快点加上—–

    用bsp就是这点不方便，rss做成这效果节省好多空间

  12. 2007.11.03 6:30 pm
    sofish(visit): [回复]

    @kerby:哈哈,谢谢啊,不过,暂时还是不要加了,麻烦你跟他们说,因为这个插件确实只是方便而已,没有其他的技术性…让他们自己做更好…

  13. 2007.11.03 7:08 pm
    Nipao.博客(visit): [回复]

    嗯，这个不错。收藏了，明日COPY一下你这个。

  14. 2007.11.03 7:33 pm
    sofish(visit): [回复]

    @Nipao:这个随便COPY,呵呵,只要能方便大家…

  15. 2007.11.03 8:06 pm
    果子(visit): [回复]

    呵呵,挺好的,我也试试

  16. 2007.11.03 8:06 pm
    maxwei(visit): [回复]

    非常不错。
    建议sofish可以做一个基础教程专题，顺便把这篇归档进去。因为现在blog越来越多，但这种基础的东西却越来越少了。

  17. 2007.11.03 8:35 pm
    sofish(visit): [回复]

    @果子:正在看能不能弄个widget…

    @maxwei:嗯,有空整理,自己做估计有点困难,水平+时间…

  18. 2007.11.03 8:56 pm
    fiorano(visit): [回复]

    原来弄过，在IE6下不能悬停，原来是少了一段代码。。。感谢分享 :)

  19. 2007.11.03 9:04 pm
    ThinkAgain(visit): [回复]

    不错啊。如果不介意的话，准备将该功能整合到添加到书签里面。呵呵。

  20. 2007.11.03 9:13 pm
    sofish(visit): [回复]

    @fiorano:呵呵,那就OK啦,方便大家是最重要的…

    @ThinkAgain:当然不介意,要就拿去用吧…

  21. 2007.11.03 9:26 pm
    qinai(visit): [回复]

    在FIREFOX下讨论那个图片怎么下面怎么空出一大块？不过，这个功能如果完美之后真的不错。

  22. 2007.11.03 9:28 pm
    qinai(visit): [回复]

    不好意思，才看出那个空白是阿里的广告，阿里的广告显示的也太慢了，还有，我特想得到书签的功能，sofish如果知道哪位搞出收藏功能时能告诉我一声，这个先收下了。谢谢

  23. 2007.11.03 9:31 pm
    sofish(visit): [回复]

    @qinai:OK,如果有看见,一定告诉你…

  24. 2007.11.04 12:43 pm
    弥缝(visit): [回复]

    已经修改成你这个了～

  25. 2007.11.04 4:02 pm
    Seavin(visit): [回复]

    以前单用用CSS实现过这个效果。
    还是JS做这个比较好。

  26. 2007.11.04 4:14 pm
    sofish(visit): [回复]

    @弥缝:怎么我就觉得你那个好看点…

    @Seavin:CSS太过于繁琐? 我登时觉得CSS好点…

  27. 2007.11.04 6:44 pm
    oxygen(visit): [回复]

    昨天弄了一下，竟然不成功……唉，什么时候也抓紧学学JS了……

  28. 2007.11.04 7:08 pm
    sofish(visit): [回复]

    @oxygen:这样啊,这个应该没什么问题的吗,你试一下把JS代码跟在页面显示的代码放一起,或许就OK了…

  29. 2007.11.04 7:53 pm
    oxygen(visit): [回复]

    已经搞定，多谢~图片还没来得及换呢- -

  30. 2007.11.05 8:59 am
    aw(visit): [回复]

    。。。果然把js普及的很大众化，赞，哈哈

  31. 2007.11.05 10:46 am
    非常接近左岸(visit): [回复]

    非常好的效果，不过JS代码里的none，block的\\\是什么含义呢？我用了之后有点问题。后来找到北极冰仔的原始代码发现是没有那个\\\的，用了就OK。

  32. 2007.11.05 12:18 pm
    sofish(visit): [回复]

    @aw:多谢aw的赞赏,呵呵…

    @非常接近左岸:纯属插件性错误,多谢提醒,已复原…

  33. 2007.11.05 10:58 pm
    未知的味觉(visit): [回复]

    在我的博客上不显示，郁闷，难道是主题的问题？

  34. 2007.11.05 11:53 pm
    sofish(visit): [回复]

    @wang:你把两代码都放在侧边栏吧,放一起试一下…

  35. 2007.11.06 9:54 am
    嘎嘎(visit): [回复]

    果然不错，虽然不用再搏克上，用在我同盟里面。嘿嘿

  36. 2007.11.07 12:05 pm
    zEUS.(visit): [回复]

    这个方法很好的绕过了 IE 不支持 :hover 这个伪类，有没有可能把这个效果做成弹出试的菜单，而不是展开和收缩呢？

  37. 2007.11.07 4:03 pm
    sofish(visit): [回复]

    @zEUS.:用js和css都可以实现,不过,我没试过,你可以看一下这个:http://blog.csdn.net/pengfei1290/archive/2004/10/19/143020.aspx

  38. 2007.11.07 11:33 pm
    zEUS.(visit): [回复]

    @sofish ：多谢 :-)

  39. 2008.01.16 10:53 am
    狮子(visit): [回复]

    呵呵，有些复杂，看不太懂，我是没有任何编程基础的。

  40. 2008.03.22 2:28 pm
    omiga(visit): [回复]

    最好这样
    if (obj.style.display == ‘none’ || !obj.style.display)

  41. 2008.05.18 10:29 am
    痞子新(visit): [回复]

    哈哈 找了半天的东西原来在这。。。看来没仔细看sofish兄的文章啊：）最近几天开始忙些乱七八糟的事情，先前一星期的更新势头貌似我又慢下来了。。。呵呵 我要坚持

  42. 2009.01.17 7:59 pm
    netputer(visit): [回复]

    这也是很好的方法,但是 RSS Feed 图标要够醒目!

Additional comments powered by BackType