日期:2014-05-16  浏览次数:20344 次

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>