js弹出menu,鼠标划上弹出,离开关闭

代码如下:

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="#" οnmοuseοver="showMenu('menuDiv','thidID')" id="thisID">菜单</a>

<div id="menuDiv"></div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值