在网页里如何用Javascript编写“鼠标经过菜单”？

估计了一下，大概是鼠标移动到菜单荐上，然后Javascirpt就检测到当前鼠标在网页中的位置。然后就显示一个层？是不是这样。
如果得到当前网页可视区域的大小呢？鼠标坐标呢？

解决方案 »

  1.   

    js获取鼠标坐标<html>
    <head>
    <title>显示鼠标坐标</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body onMousemove="micro$oftMouseMove()">
    <br>
    <br>
    <center>　</center>
    <br>
    <center>
    <table border=1 bordercolor=#000000 borderlight=green style="border-collapse: collapse" cellpadding="0" cellspacing="0">
    <tr><td align=center><font size=5 color=red face="华文中宋">
    <strong style="font-weight: 400">下面框中为脚本显示区</strong></font></td></tr>
    <tr><td align=center height=80>
    <SCRIPT LANGUAGE="JavaScript">
    if (navigator.appName == 'Netscape')
    {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = netscapeMouseMove;
    }function netscapeMouseMove(e) {
    if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
    {
    document.test.x.value = e.screenX;
    document.test.y.value = e.screenY;
    } 
    }function micro$oftMouseMove() {
    if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
    {
    document.test.x.value = window.event.x;
    document.test.y.value = window.event.y;
    }
    }
    </SCRIPT>
    <FORM NAME="test">
    X: 
    <INPUT NAME="x" SIZE="4" style="border: 1px solid #000000"> Y: 
    <INPUT 
    TYPUE="TEXT" NAME="y" SIZE="4" style="border: 1px solid #000000">
    </FORM>
    </td></tr></table></center>
    <br>
    <br>
    <center><SCRIPT LANGUAGE="JavaScript"><!-- hide
    function goHist(a)
    {
       history.go(a);
    }
    //-->
    </script>
    </center></body>
    </html>
      

  2.   

    你要的这些信息网上全有，去cnblogs上看看，肯定有你要的
      

  3.   

    简单点的就是你把菜单做成a，直接用onmouseover
      

  4.   


    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>横向菜单</TITLE>
    <STYLE type="text/css">
    td {
    FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 22px;
    }
    div{
    background-color:#669933;
    text-align:center;position:absolute;z-index:2;}
    A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none;
    background-color:#669933;
    width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}
    A:hover {FONT-SIZE: 13px; COLOR: #ffffff;
    background-color:#FE9D01;
    width:100px;line-height:22px;text-align:center;}
    </STYLE>
    <SCRIPT language="JavaScript">
    function show(d1){
    document.getElementById(d1).style.display='block';  //显示层
    }function hide(d1){
    document.getElementById(d1).style.display='none';  //隐藏层
    }
    </SCRIPT>
    </HEAD><BODY  oncontextmenu="return false;">
    <TABLE width="303" border="0" cellspacing="0" cellpadding="0" align="center">
    <TR>
        <TD><A href="#"  onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</A></TD>
        <TD><A href="#" onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</A></TD>
        <TD><A href="#" onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</A></TD>
      </TR>
      <TR>
        <TD><DIV  id="1"    onMouseMove="show(1)" onMouseOut="hide(1)" style="display:none;"><A href="#">手机数码1</A><BR><A href="#">手机数码2</A><BR><A href="#">手机数码3</A></DIV></TD>
        <TD><DIV  id="2"    onMouseMove="show(2)" onMouseOut="hide(2)" style="display:none;"><A href="#">淘宝集市1</A><BR><A href="#">淘宝集市2</A><BR><A href="#">淘宝集市3</A></DIV></TD>
        <TD><DIV  id="3"    onMouseMove="show(3)" onMouseOut="hide(3)" style="display:none;"><A href="#">品牌商城1</A><BR><A href="#">品牌商城2</A><BR><A href="#">品牌商城3</A></DIV></TD>
      </TR></TABLE>
    </BODY>
    </HTML>
      

  5.   


    朋友高招。换成UL LI这种方式不行了，不用表格.... 显示的位置总是在某一个地方。