简单的HoverMenu效果_.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

<!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>

表单中按Enter键让光标移到下一个输入框	Html Checkbox 多选用jquery限制最多可选数
鼠标滑过行变色	Div+CSS+JS打造可刷新树型菜单
HTML教程基础(四)：a标签	DIV与Table布局在大型网站的可用性比较
IFrame实现页面无刷新	网站为什么用Utf-8编码
CSS100%布局小事例	HTML教程基础(二)：Head部分
HTML5:FieldSet与Legend标签，HTML中的GroupBox	div弹出层的ajax登录(Jquery版)
HTML教程基础(五)：img标签	用css控制cellspacing、cellpadding
HTML教程基础(十一)：框架和内联框架	简单的HoverMenu效果
中文汉字GB2312和UTF-8的编码转换程序	常用的CSS

Tab可切换皮肤的后台模板	Silverlight实现的在线头像截取功能
快速查询ICP备案号的VB.Net源码	医院门诊管理系统源码
慧摩森电子系统技术公司整站(.Net+ACCESS)	基于SQLite开发的数据库示例
C#使用DataBinding、DataView进行数据绑定一些实例	淄博某泵业网站源码
i-favourite3.0Build多用户博客系统免安装版源码	isRoc个人内容管理系统简约iPlaySoft皮肤
Asp.net简单多用户Blog程序源码	Winform企业综合人事管理系统
CRM客户关系管理系统源码	Asp.net修正版eWebEditor源码

.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

热门标签

简单的HoverMenu效果

Tags：