js弹出层,鼠标划上弹出,鼠标离开关闭
代码如下:
function getElementWidth(objectId) {x = $_(objectId);return x.offsetWidth;}
function getElementHeight(objectId) {x = $_(objectId);return x.offsetHeight;}
function getAbsoluteLeft(objectId) {
o = $_(objectId)
oLeft = o.offsetLeft
while(o.offsetParent!=null) {
oParent = o.offsetParent
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
function getAbsoluteTop(objectId) {
o = $_(objectId)
oTop = o.offsetTop
while(o.offsetParent!=null) {
oParent = o.offsetParent
oTop += oParent.offsetTop
o = oParent
}
return oTop
}
var showMenuDelay = 0;
function showMenu(showID,thisID){
clearTimeout(showMenuDelay);
$_(showID).style.display='';
var clickElementx = getAbsoluteLeft(thisID);
var clickElementy = getAbsoluteTop(thisID) + getElementHeight(thisID);
$_(showID).style.top = clickElementy + 'px';
$_(showID).style.left = clickElementx + 'px';
document.body.insertBefore($_(showID),document.body.firstChild);
$_(thisID).onmouseout = function(){closeMenu(showID);}
$_(showID).onmouseover = function(){clearTimeout(showMenuDelay);}
$_(showID).onmouseout = function(){closeMenu(showID);}
}
function hideMenu(showID){
$_(showID).style.display='none';
}
function closeMenu(showID){
showMenuDelay = setTimeout(function(){hideMenu(showID);},200);
}
使用方法<a href="#" onmouseover="showMenu('menuDiv','thidID')" id="thisID">菜单</a>
<div id="menuDiv"></div>