如何用JQuery做这样的效果

发布网友

我来回答

2个回答

热心网友

对于你说的1层:
onmouseover=显示函数
onmouseout=隐藏函数
(隐藏函数你可以设置延时如500ms,这样便不会立即隐藏)
timeout = setTimeout(function(){/* 这里设置隐藏的代码 */},500);
当鼠标离开1层但是没有进入2层的时候,500ms之后 2层就消失

对于层2
onmouseover=显示函数
{
进入显示函数后,便立即清除timeout;这样在离开1层500ms内
隐藏函数不会立即执行,在其执行前取消掉。
clearTimeout(timeout);
}
onmouseout=隐藏函数
(隐藏函数你也可以设置延时如500ms,这样便不会立即隐藏)
timeout = setTimeout(function(){/* 这里设置隐藏的代码 */},500);

仅提供思路,代码你可以自己写……

<div id="myaccount">我的菜单</div>
<div id="myaccount-menu">子菜单</div>
<script>
var MyTimeout;
$(document).ready(function(){
Test();
});
function Test(){

$("#myaccount").css({
background:"#FCC",
width:120,
lineHeight:"36px"
});
//可以先藏起来
$("#myaccount-menu").css({
background:"#CFC",
height:0,
width:120,
lineHeight:"36px",
overflow:"hidden"
});
//鼠标经过myaccount的时候
$("#myaccount").bind('mousemove',function(){
try{clearTimeout(MyTimeout);}
catch(e){}
$("#myaccount-menu").animate({height:36},100);
});
$("#myaccount").bind('mouseout',function(){
//设置延迟,等200ms之后如果鼠标没有进入myaccount或者myaccount-menu,将执行隐藏
MyTimeout = setTimeout(function(){
$("#myaccount-menu").animate({height:0},100);
},200);
});
//鼠标经过myaccount-menu的时候
$("#myaccount-menu").bind('mousemove',function(){
try{clearTimeout(MyTimeout);}
catch(e){}
$("#myaccount-menu").animate({height:36},100);
});
$("#myaccount-menu").bind('mouseout',function(){
MyTimeout = setTimeout(function(){
$("#myaccount-menu").animate({height:0},100);
},200);
});
}
</script>

以上animate是设置动画效果的,如果不用,可以直接设置display:"none"/"block"
实现立即显示或者隐藏。

热心网友

你说的应该是一个多级联动下拉浮动菜单
这里有一个
可以试试看

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?6=n&id=11931

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com