2011年6月7日版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HoverMenu</title>
<head>
<script type="text/javascript">
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
return true;
} else if (obj.detachEvent){
var r = obj.detachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function initHoverMenu(){
var elms = document.getElementsByTagName('a');
for (i = 0; i < elms.length; i++) {
if (elms[i].className.indexOf("HoverMenu") == 0) {
addEvent(elms[i],'mouseover',showHoverMenu);
addEvent(elms[i],'mouseout',hidHoverMenu);
}
}
}
function showHoverMenu(e){
var Pos = getPosition(e);
var menu = createMenu();
menu.style.display = "block";
menu.style.top = Pos.y + "px";//要加"px"否则不兼容FF
menu.style.left = Pos.x + "px";
}
function hidHoverMenu(){
var menu = createMenu();
menu.style.display = "none";
}
function createMenu(){
if(createMenu._init == undefined){
theBody = document.getElementsByTagName('BODY')[0];
menu = document.createElement('div');
menu.id = "MenuID";
menu.style.position = 'absolute';
menu.innerHTML = "this is Menu";
menu.style.top = 100;
theBody.appendChild(menu);
createMenu._init = 1;
}
return menu;
}
function getPosition(e){//要兼容FF的话，这个参数一定要写上
e = window.event || e;
srcElement = e.srcElement || e.target;
var top = srcElement.getBoundingClientRect().top + getScrollTop();
var left = srcElement.getBoundingClientRect().right + getScrollLeft();
return {x:left, y:top};
}
function getScrollTop() {
if (self.pageYOffset) // all except Explorer
{
return self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) // Explorer 6 Strict
{
return document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
return document.body.scrollTop;
}
}
function getScrollLeft() {
if (self.pageXOffset) // all except Explorer
{
return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft) // Explorer 6 Strict
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
return document.body.scrollLeft;
}
}
addEvent(window,'load',initHoverMenu);
</script>
</head>
<body>
<a href="#" id="ima" class="HoverMenu">菜单</a><br>
<a href="#" id="ima" class="HoverMenu">菜单</a><br>
<a href="#" id="ima" class="HoverMenu">菜单</a>
</body>
</html>
效果图
