2010年03月12日 86条评论

jQuery渐变下拉菜单的实现方法 - 完美篇

我曾经写过一篇《jQuery 渐变下拉菜单的实现方法》,但此方法有个 bug :就是当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行,相当不美观,这个问题 mg12 也写过一篇文章说明和提供解决方法,但今天我写的方法是 Willlin 帮我解决的方法,很简单的方法。我只把代码贴出,具体代码的标注就不标了 ,原因很简单:我是 CP 党 - -

下面以 RSS 订阅 jQuery 渐变下拉菜单为例:

演示:原自用主题 zww-line 右上角 RSS 订阅效果 》传送门(ps:这个效果是我专门为 zww-line 定制的,下面的代码没有图片,但完全可以通过修改 css 实现)

第一步:加载 jQuery 库和 jQuery 代码

在 footer.php 的 <?php wp_footer(); ?> 下面加入如下代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#rss").hover(function(){if(!$(this).children("#rss ul").is(":animated")){$(this).children("#rss ul").slideDown("800");}},function(){$(this).children("#rss ul").slideUp("400");});//willin
	})
</script>

注:如果已经加载了 jQuery 库,那么第一行删除,如果你有专门的 js 文件,吧 $(function(){... ... }) 加入即可。

第二步:在放 RSS 的地方输入以下 html

<div id="rss"><a href="http://feed.zww.me" rel="nofollow" title="订阅我的博客" target="_blank">订阅我的博客</a>
     <ul>
           <li><a href="http://fusion.google.com/add?feedurl=http://feed.zww.me" target="_blank" rel="nofollow" title="Google订阅">Google订阅</a></li>
           <li><a href="http://www.xianguo.com/subscribe.php?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到鲜果">鲜果订阅</a></li>
           <li><a href="http://www.zhuaxia.com/add_channel.php?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到抓虾">抓虾订阅</a></li>
           <li><a href="http://reader.youdao.com/b.do?keyfrom=feedsky&amp;url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到有道">有道订阅</a></li>
           <li><a href="http://inezha.com/add?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到哪吒">哪吒订阅</a></li>
           <li><a href="http://mail.qq.com/cgi-bin/feed?u=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到QQ邮箱">QQ邮箱订阅</a></li>
           <li><a href="http://add.my.yahoo.com/rss?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到Yahoo">Yahoo订阅</a></li>
           <li><a href="http://www.feedsky.com/msub_wr.html?burl=zwwooooo" target="_blank" rel="nofollow" title="邮件订阅">邮件订阅</a></li>
           <li><a href="http://feed.zww.me" target="_blank" rel="RSS" title="更多方式">更多方式 &raquo;</a></li>
     </ul>
</div>

注:把 http://feed.zww.me 改为自己的 Feed 地址,<li></li> 随便增加/减少订阅

第三步:#rss 的 css 部分

#rss{
position:relative;
z-index:10;
float:left;
margin:0;
padding:0;
width:20px;
height:20px;
}

#rss ul{
position:absolute;
display:none;
z-index:9999;
top:0;
right:0;
text-align:center;
background:#fff;
width:120px;
padding:15px;
border:1px solid #ccc;
}

#rss ul li{
list-style:none;
border-bottom:1px solid #f2f2f2;
padding:3px 0;
}

就这样,具体可以根据自己实际情况更改,样式可以通过修改 css 实现

zww
or
oooo

“jQuery渐变下拉菜单的实现方法 - 完美篇”有86条评论

  1. LAONB says:

    老胸,我怎么没找到Demo,呵呵。

    1. zwwooooo says:

      @LAONB 忘了加链接,哈哈,已经加上 :?:

    2. LAONB says:

      @zwwooooo 不折腾不铁血,铁血真汉子。我是来看右边广GAO的。

    3. zwwooooo says:

      @LAONB 哈哈,铁血很折腾

  2. 飞猪 says:

    嘿 嘿 ,围观CP党

  3. 万戈 says:

    找了半天没有演示啊

    1. zwwooooo says:

      @万戈 忘了,已加上,其实万戈你看过啦,以前我那有枪的主题上的 RSS 就是啦,没啥特别的

  4. 阿修 says:

    关键就是那个 animated 吧~呵呵。zww-line挺好看的,不过这个更像博客一点 :?: :?:

    1. zwwooooo says:

      @阿修 对,就是那个判断,mg12是用鼠标停留0.2秒来判断执行,我的是用判断来结束动画

  5. koobai says:

    这不错~~

  6. koobai says:

    如果div那的id写的不是rss,那$("#rss")是不是也得对应的修改

  7. QiQBoY says:

    jQuery你一直都是用的1.2.6版本么。。我一直在用1.3.1,在考虑有没必要换成最新的1.4呢。。。 :evil:

    1. zwwooooo says:

      @QiQBoY 因为都是简单应用,所以觉得没必要更新

    2. edikud says:

      @QiQBoY jQuery1.2.6版本,体积小,简单应用,足够了!

  8. MOPVHS says:

    突然发现,你这里推 特调用出错了...

    Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:zwwooooo&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 502 Bad Gateway in /home/zww/domains/zww.me/public_html/wordpress/wp-content/themes/zsofa-evo/header.php on line 121
    1. MOPVHS says:

      @MOPVHS 囧,刚才一定是意外...

    2. zwwooooo says:

      @MOPVHS 灵异现象,可能跟网络抽风有关

  9. A.shun says:

    我的css定位还没弄好。。杯具 :grin:

    1. zwwooooo says:

      @A.shun css定位不是很简单么?如果麻烦就用绝对定位吧

  10. Dianso says:

    不懂jquery,学习下。

    1. zwwooooo says:

      @Dianso 不懂直接cp :lol:

  11. 球犯 says:

    呵呵,越来越炫了阿~

  12. popo says:

    喜欢渐变的效果 :mrgreen:

  13. 皓辰 says:

    嗯哼,这个在写文章时也可以用到

    1. zwwooooo says:

      @皓辰 写文章时????

  14. Kars says:

    我用的是 mg12 的方法 额 、、前几天在推特上 刚请教过他 、、

    1. zwwooooo says:

      @Kars mg12的是通过判断鼠标停留时间激活动画,跟我这个相反吧

    2. Kars says:

      @zwwooooo 额、、觉得 延时 的方法 更友好 、、上次是我 RPWT 了 ,现在 评论正常了 、、、

    3. zwwooooo says:

      @Kars 哈哈,其实一样的,只是方法不同,多一种方法不是更好么?

    4. Kars says:

      @zwwooooo 嗯嗯~ 先收藏了,或许以后会用到~

  15. PNG图标 says:

    哦了啊,学会啦。

  16. 久酷 says:

    jquery用起来比JS还是方便许多. :mrgreen: :mrgreen:

  17. Firm says:

    俺依样画葫芦,试试去

    1. zwwooooo says:

      @Firm CP当的精髓:依样画葫芦 :roll:

  18. 小明猪 says:

    哈哈,过来学习~~最近大家怎么都换成这个表情了咧 :oops:

    1. zwwooooo says:

      @小明猪 很多人用么?我是最先把此表情转换+修改为wp下使用

  19. edikud says:

    也学习下!

  20. Bee君 says:

    一切技术文对我来说都很大压力.... :shock:

    1. zwwooooo says:

      @Bee君 那就学我直接 CP

发表评论

昵称 *

网址

B em del U Link Code Quote