您當前位置：首頁 > web前端 > jquery > jQuery 打造的漸變下拉菜單效果

jQuery 打造的漸變下拉菜單效果

來源：程序員人生發布時間：2013-11-07 21:53:28 閱讀次數：3881次

　　利用jQuery來實現，其實就幾行代碼的事。即便如此，由于js語言的思維方式，還是一直沒有把握好，加上一個css的問題，導致弄了好久才出來效果。這里主要是利目標在鼠標經過時（.hover()）利用slideToggle() 、slideUp()來顯示原來隱藏著的內容：

$(function(){
$(".dropdown").hover(
function(){ $("li ul").slideToggle(800);},
function(){$("li ul").slideUp(1000)}
)
})

　　實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>jQuery 漸變下來效果 - liehuo.net</title><style type="text/css">a{text-decoration:none;color:#333;}a:hover{color:#f33;}a.gr{color:#227CE8;}a.xg{color:#f30;}a.zx{color:#690;}a.yd{color:#f00;}a.more-rss{color:#f60;}a img{border:none;}a.rssfeed{display:block;height:60px;width:160px;cursor:pointer;}.wrapper{width:700px;margin:0 auto;height:460px;position:relative;}.wrapper small{position:absolute;bottom:0;left:0;border-top:1px dotted #b3b3b3;display:block;width:700px;line-height:30px;text-align:right;}ul li{list-style:none;}ul li.dropdown{position:relative;width:160px;}ul li.dropdown ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:160px;padding:15px 15px 20px;}ul li.dropdown ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style></head><body><div class="wrapper"><h1><a href="http://www.jyygyx.com/">jQuery 漸變下拉菜單</a></h1><p>使用slideToggle和slideUp來實現.當然,也可以使用hide/show, fadeIn/fadeOut等來實現,只是效果不同,實現的方法還是相同的.需要注意的是,要給.dropdown加上position:relative;防止閃爍.</p><ul class="fir"><li class="dropdown"><a class="rssfeed"><img src="http://www.jyygyx.com/uploads/litimg/0912/feedme.png" alt="feedme" /></a><ul><li><a href="http://www.jyygyx.com/" rel="RSS"><img src="http://www.jyygyx.com/uploads/litimg/0912/rss.gif" alt="RSS Feed" /></a></li><li><a href="http://www.jyygyx.com/" class="xg" rel="nofollow">鮮果訂閱</a></li><li><a href="http://www.jyygyx.com/" class="gr" rel="nofollow">Google訂閱</a></li><li><a href="http://www.jyygyx.com/" class="zx" rel="nofollow">抓蝦訂閱</a></li><li><a href="http://www.jyygyx.com/" class="yd" rel="nofollow">有道訂閱</a></li><li><a href="http://www.jyygyx.com/" class="more-rss" rel="RSS">更多方式 »</a></li></ul></li></ul></div><script language="javascript" type="text/javascript" src="http://www.jyygyx.com/uploads/common/jquery-1.3.2.min.js"></script><script language="javascript" type="text/javascript">$(function(){$(".fir .dropdown").hover(function(){$("li ul").slideToggle(800);},function(){$("li ul").slideUp(1000)})})</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 巧用百度貼吧推廣網站獲取大量流量的另類手段

下一篇 JavaScript：跳轉頁面的幾個方法

分享到:

------分隔線----------------------------

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

jQuery 打造的漸變下拉菜單效果