鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
更新時(shí)間：2014年10月29日 16:17:23 投稿：whsnow
當(dāng)鼠標(biāo)懸浮時(shí)顯示二級(jí)菜單，這種類似的效果，想必大家在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)遇到吧，下面有個(gè)示例，大家可以看看
1.布局：
<div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" style="cursor: pointer" href='#'> <span>修改密碼</span> </a> </li> <li> <a class="quit" style="cursor: pointer" href='#' ><span>退出</span></a> </li> </ul> </div> </div>
2.js控制：
function dropMenu(obj) {
$(obj).each(function () {
var theSpan = $(this);
var theMenu = theSpan.find(".drop");
var tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
var t1;
function expand() {
clearTimeout(t1);
//theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);
}
function collapse() {
clearTimeout(t1);
t1 = setTimeout(function () {
// theSpan.find('a').removeClass("selected");
theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {
$(this).css({ display: "none" });
});
}, 250);
}
theSpan.hover(expand, collapse);
theMenu.hover(expand, collapse);
});
}
相關(guān)文章
有時(shí)候，我們可能不會(huì)在網(wǎng)頁(yè)中<script src="jquery.min.js">來(lái)加載Jquery庫(kù),可能在用戶點(diǎn)擊某個(gè)按鈕后,才去加載Jquery庫(kù),下面介紹一下動(dòng)態(tài)加載jquery庫(kù)的方法2014-02-02
JQuery實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器輪詢效果實(shí)例
這篇文章主要介紹了JQuery實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器輪詢效果,結(jié)合實(shí)例形式分析了jQuery的ajax交互結(jié)合.net處理實(shí)現(xiàn)輪詢效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03
當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)跟隨鼠標(biāo)顯示放大的圖片效果
當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，跟隨鼠標(biāo)顯示放大顯示的圖片，具體效果情況截圖，另附送源碼，感興趣的朋友可以學(xué)習(xí)下哈2013-06-06![jQuery中[attribute!=value]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg3.png)
jQuery中[attribute!=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute!=value]選擇器用法,實(shí)例分析了[attribute!=value]選擇器匹配不包含指定屬性元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery新的綁定事件機(jī)制on方法的使用方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery中extend函數(shù)詳解的相關(guān)資料,需要的朋友可以參考下2015-07-07
Jquery選擇器簡(jiǎn)明版?Jquery選擇器實(shí)用版
最近需要用jquery獲取一些dom數(shù)據(jù)的操作，發(fā)現(xiàn)jquery的選擇器非常強(qiáng)大，很方便進(jìn)行一些dom操作，下面就專門(mén)針對(duì)這塊內(nèi)容做個(gè)簡(jiǎn)單的介紹,需要的朋友可以參考下2023-05-05
jQuery的:parent選擇器匹配含有子元素或者文本的元素，空格也算是含有的元素，下面有幾個(gè)示例，大家可以學(xué)習(xí)下2014-07-07
這篇文章主要介紹了Jquery異步上傳文件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Jquery帶搜索框的下拉菜單，需要的朋友可以參考一下2013-05-05