js onmuseover与onmuseout

悬赏园豆：5 [已关闭问题]

动态创建菜单在目前 IE6.0上出问题..

说明：动态创建主菜单与子菜单。

在页面加载时创建主菜单。当鼠标移上主菜单创建子菜单。

子菜单分别有三块。

问题就在这里。现在我要把这些东西放在asp.net 里头aspx 页里就会出现下拉菜单不稳定，会出现一闪一闪。

Code
//判断浏览器
function isIE() {
    if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
        return "IE";
    }
    /*else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
        return "FF";
    }*/
    else if (navigator.appName == "Netscape")/*FF与google*/
    {
        return "Netscape";
    }
    else {
        return "Other";
    }
}
function $(str_id) {
    return document.getElementById(str_id);
}
function TagName(str_id, Tagname) {
    if (isNull(str_id))
        return document.body.getElementsByTagName(Tagname);
    else
        return $(str_id).getElementsByTagName(Tagname);
}
function byCls(className, tag) {
    var tags = document.getElementsByTagName(tag);
    var elements = new Array();
    var element;
    var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');
    for (var i = 0, l = tags.length; i < l; i++) {
        element = tags[i];

        if (regex.test(element.className)) {
            elements.push(element);
        }
    }
    return elements;
}
function hidden(str_id, state) {
    var obj = $(str_id);
    if (isNull(state)) {
        obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
    } else {
        obj.style.display = state;
    }
}
function getXY(obj) {
    var o = new Object();
    o.left = 0;
    o.top = 0;
    o.right = 0;
    o.bottom = 0;
    var oWidth = obj.offsetWidth;
    var oHeight = obj.offsetHeight;
    while (obj) {
        o.left += obj.offsetLeft;
        o.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    o.right = o.left + oWidth;
    o.bottom = o.top + oHeight;
    return o;
}
function isNull(obj) {
    return (obj == "" || obj == null || obj == "undefined");
}
function $c(TagName) {
    return document.createElement(TagName);
}
function AddEvent(TargetObj, EventType, FunctionName) {
    !document.all ? TargetObj.addEventListener(EventType, FunctionName, false) : TargetObj.attachEvent("on" + EventType, FunctionName);
}

function DelEvent(TargetObj, EventType, FunctionName) {
    !document.all ? TargetObj.removeEventListener(EventType, FunctionName, false) : TargetObj.detachEvent("on" + EventType, FunctionName);
}
//移动
var ie = document.all;
var nn6 = document.getElementById && !document.all; //是否是ns6的浏览器
var isdrag = false;
var point_y, point_x;
var oDragObj;
function moveMouse(e) {
    if (isdrag) {
        oDragObj.style.top = (nn6 ? nTY + e.clientY - point_y : nTY + event.clientY - point_y) + "px";
        oDragObj.style.left = (nn6 ? nTX + e.clientX - point_x : nTX + event.clientX - point_x) + "px";
        return false;
    }
}
function setIsDrag() {
    isdrag = false;
}
function initDrag(e, str_className) {
    var oDragHandle = nn6 ? e.target : event.srcElement; //e.target event.srcElement节点与节点类型
    var topElement = "HTML";
    while (oDragHandle.tagName != topElement && oDragHandle.className != str_className) {//判断是否有选中页面上要移动的元素
        oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; //获取父元素
        //window.status=oDragHandle.innerHTML;查看选中的页面html这个元素的内容
    }
    //判断选中的对象的样式是否是cs样式
    if (oDragHandle.className == str_className) {
        isdrag = true; //用于控制对象可拖动性
        oDragObj = oDragHandle; //把获取的对象赋值给新的变量
        nTY = parseInt(oDragObj.style.top + 0); //获取对象所在的Y坐标
        point_y = nn6 ? e.clientY : event.clientY; //获取鼠标所在的Y坐标
        nTX = parseInt(oDragObj.style.left + 0); //获取对象所在的X坐标
        point_x = nn6 ? e.clientX : event.clientX; //获取鼠标所在的X坐标
        document.onmousemove = moveMouse; //再次把文档的移动事件赋新函数
        return false;
    }
}

function initDragMain() {
    initDrag(event, "favDiv")
}
//document.onmousedown=initDragMain;给文档要移动的对象添加——事件设驱动函数
//document.onmouseup=setIsDrag; new Function("isdrag=false");//没有把isdrag设为假者一直跟追

HTML如下

Code
<!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=gb2312" />
<title>无标题文档</title>
<style>
    .Navigation
    {
        width:80%;margin:auto;position:relative;
    }
    .Navigation a
    {
        display:block;wdith:80px;padding:5px;
        margin:auto 5px;float:left;
        text-decoration:none;
    }
    .Navigation a:hover
    {
        display:block;wdith:80px;
        margin:auto 5px;background:#0099FF;
    }
    .seld
    {
        background:#FF6699;
    }
    .MenuContent
    {
        z-index:99;
        background:#CCCCCC;width:60%;border:1px #666666 dashed;height:auto;padding:5px;
        position:absolute;left:0px;top:0px;    
    }
</style>
<script src="js/base.js" language="javascript"></script>
<script>
var _MenuItem={
    id:"",
    txt:"",
    alink:"",
    css:"",
    Html:"",
    ID_pro:function(id)
    {
        if(isNull(id)){ return this.id;}
        else{this.id=id;}
    },
    InitMenuItem:function(id,txt,alink,css)
    {
        this.id=id;
        this.txt=txt;
        this.alink=alink;
        this.css=css;
    },
    GetHtmlObj:function()
    {
    //debugger
        var ItemDiv=$c("a");
        ItemDiv.id=this.id;
        ItemDiv.href=this.alink;
        ItemDiv.className=this.css;
        ItemDiv.innerHTML=this.txt;
        AddEvent(ItemDiv,"mouseover",over);
        AddEvent(ItemDiv,"mouseout",out);
        function over(event)
        {
            //alert("over");
            //debugger
             var e = event || window.event;
                var srcElement = e.srcElement || e.target;
            if(isNull($(srcElement.id+"_Content")))
            {
                _MeunsContent.Init(srcElement.id+"_Content","MenuContent");
                var Mc=_MeunsContent.GetMenusContent();
                document.body.appendChild(Mc);
            }
            else
            {
                $(srcElement.id+"_Content").style.display="block";
            }
            
        }
        function out(event)
        {
             var e = event || window.event;
                var srcElement = e.srcElement || e.target;
            $(srcElement.id+"_Content").style.display="none";
            //alert("out");
        }
        return ItemDiv;
    }
}
var _MeunsContent={
    id:"",
    css:"",
    Init:function(id,css)
    {
        this.id=id;
        this.css=css;
    },
    GetMenusContent:function()
    {
        var Content=$c("div");
        var ContentTop=$c("div");
        var ContentMid=$c("div");
        var ContentBottom=$c("div");
        
        var p=$(this.id.substring(0,this.id.indexOf('_Content')));
        var menuItemXY=getXY(p);
        
        Content.id=this.id;
        Content.className=this.css;
        
        ContentTop.style.cssText="border:1px blue solid;height:40px;width:100%;background:#FFF;margin:auto;";
        ContentTop.innerHTML=this.id;
        
        ContentMid.style.cssText="border:1px blue solid;height:40px;width:100%;background:#FFF;margin:10px auto;";
        ContentMid.innerHTML=this.id;
        
        ContentBottom.style.cssText="border:1px blue solid;height:40px;width:100%;background:#FFF;margin:auto;";
        ContentBottom.innerHTML=this.id;
        
        Content.style.top=menuItemXY.top+p.offsetHeight+"px";
        Content.style.left=menuItemXY.left+"px";
        
        Content.appendChild(ContentTop);
        Content.appendChild(ContentMid);
        Content.appendChild(ContentBottom);
        
        AddEvent(Content,"mouseover",showContent);
        AddEvent(Content,"mouseout",hideContent);
        
        function showContent()
        {
            window.status="show";
            p.className="seld";
            Content.style.display="block";
        }
        
        function hideContent()
        {    
            p.className="";
            window.status="hide";
            Content.style.display="none";
        }
        
        return Content;
    }
}
function loadMenu()
{
    for(var i=0;i<5;i++)
    {
        _MenuItem.InitMenuItem(i.toString()+"_Div",i+"Menu","#","NavMenu");
        $("navDiv_").appendChild(_MenuItem.GetHtmlObj());
    }    
}
AddEvent(window,"load",loadMenu);
</script>
</head>

<body>
<div class="Navigation" id="navDiv_">    
</div>

</body>

</html>

网站开发 Javascript

Ailen | 初学一级 | 园豆：177
提问于：2009-07-06 13:35

< >

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

js onmuseover与onmuseout

欢迎，请先登录或者注册。