js - 调试易

        $(function () {
            $("#图片ID").click(function () {
                $("#菜单ID").show();
            });
            $("#菜单ID").mouseout(function () {
                $("#菜单ID").hide();
            });
        });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        a
        {
            font-size: 12px;
            text-decoration: none;
            color: Green;
            margin:10px 5px;
        }
    </style>
    <script type="text/javascript">
        document.oncontextmenu = function(e) { return false; }
    </script>
<script type="text/javascript">

function contextMenuOperation(event) {
    var e = event || window.event;
    e.returnValue = false;
    var img = document.getElementById("img_Person");
    img.contextmenu = function() { return false; }
    var div = document.getElementById("div_ContextMenu");
    var left = e.clientX;
    var top = e.clientY;
    div.style.display = "block";
    div.style.position = "absolute";
    div.style.left = left + "px";
    div.style.top = top + "px";
}
function contextMenu(event) {
    var e = event || window.event;
    e.returnValue = false;
    var img = document.getElementById("img_Person");
    img.contextmenu = function() { return false; }
    var div = document.getElementById("div_ContextMenu");
    var left = e.clientX;
    var top = e.clientY;
    div.style.display = "none";
    div.style.position = "absolute";
    div.style.left = left + "px";
    div.style.top = top + "px";

} </script>
</head>
<body>
    <div>
        <img id="img_Person" style="cursor:pointer;" oncontextmenu="return false;" onmousedown="contextMenuOperation(event);" src="Images/girl.jpg" alt="原圖"/>
    </div>
    <div id="div_ContextMenu"  style="border:1px solid green;width:150px;height:100px;display:none;"  OnMouseOut="contextMenu(event);">
        <ul style="list-style: none; list-style-type:none;margin:0px;background-color:White;">
            <li><a id="isFrame2" href="#"><font algin="center">弹出</font></a></li>
            <li><a href="#"><font algin="center">搜狐</font></a></li>
        </ul>
    </div>
</body>
</HTML>

我就这样写着，但是当鼠标移到div_ContextMenu这个div上，这个div就关闭了。

楼主看这个：http://www.cnblogs.com/QLeelulu/archive/2008/12/03/1346869.html<html>
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  a
  {
  font-size: 12px;
  text-decoration: none;
  color: Green;
  margin:10px 5px;
  }
  </style>
  <script type="text/javascript"></script>
</head>
<body>
  <div>
  <img id="img_Person" style="cursor:pointer;" onclick="document.getElementById('div_ContextMenu').style.display='block'"src="a.jpg" alt="原圖"/>
  </div>
  <div id="div_ContextMenu" style="border:1px solid green;width:150px;height:100px;display:none;"onmouseleave="document.getElementById('div_ContextMenu').style.display='none'">
  <ul style="list-style: none; list-style-type:none;margin:0px;background-color:White;">
  <li><a id="isFrame2" href="#"><font algin="center">弹出</font></a></li>
  <li><a href="#"><font algin="center">搜狐</font></a></li>
  </ul>
  </div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />
  <style type="text/css">
  a
  {
  font-size: 12px;
  text-decoration: none;
  color: Green;
  margin:10px 5px;
  }
  </style>
<script type="text/javascript">

function contextMenuOperation(event) {
  var e = event || window.event;
  e.returnValue = false;
  var img = document.getElementById("img_Person");
  img.contextmenu = function() { return false; }
  var div = document.getElementById("div_ContextMenu");
  var left = e.clientX;
  var top = e.clientY;
  div.style.display = "block";
  div.style.position = "absolute";
  div.style.left = left + "px";
  div.style.top = top + "px";
}
function contextMenu(event) {
  var e = event || window.event;
  var img = document.getElementById("img_Person");
  img.contextmenu = function() { return false; }
  var div = document.getElementById("div_ContextMenu");
  if(test(div,e)){
  var left = e.clientX;
  var top = e.clientY;
  div.style.display = "none";
  div.style.position = "absolute";
  div.style.left = left + "px";
  div.style.top = top + "px";
  e.returnValue = false;
}
}if(typeof(HTMLElement)!="undefined")   // 给firefox定义contains()方法，ie下不起作用
  {
      HTMLElement.prototype.contains=function(obj)
      {
          while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
  　　　　if(obj==this)  return true;
  　　　　 obj=obj.parentNode;
   　　}
          return false;
      };
  }   function test(obj, e) {
if (e.currentTarget) {
   if (e.relatedTarget != obj) {
    if (obj != e.relatedTarget.parentNode && !obj.contains(e.relatedTarget)) {
     return true;
    }
   }
} else {
   if (e.toElement != obj) {
    if (obj != e.toElement.parentNode && !obj.contains(e.toElement)) {
     return true;
    }
   }
}
}</script>
</head>
<body>
  <div>
  <img id="img_Person" style="cursor:pointer;" oncontextmenu="return false;" onmousedown="contextMenuOperation(event);" src="Images/girl.jpg" alt="原圖"/>
  </div>
  <div id="div_ContextMenu" style="border:1px solid green;width:150px;height:100px;display:none;" OnMouseOut="contextMenu(event);">
  <ul style="list-style: none; list-style-type:none;margin:0px;background-color:White;">
  <li><a id="isFrame2" href="#"><font algin="center">弹出</font></a></li>
  <li><a href="#"><font algin="center">搜狐</font></a></li>
  </ul>
  </div>
</body>
</HTML>

我在IE和FF下试了，行的通，楼主可以参考

这个可以，但是如果你不停的刷新页面，这个div_ContextMenu就在页面乱跑，就不在我要指定的位置显示，咋样可以控制层，让在指定的位置显示

晕鼠标点击，用onclick的函数动态创建一下div，或者实现创建好的display:displayed 的div 用来布局你要的菜单，再onmouseomve的时候把实现操作的布局菜单的div在隐藏不就OK？
我最近也在自学JS  和jQuery
下面是我暑假时练习的列子，LZ可以参考下、
<head runat="server">
    <title>快乐女生全国六强</title>
    <script type="text/jscript">
        var data={ "kuai/duan.jpg":["kuai/duan2.jpg","姓名：段林希","年龄：22","身高：165"],"kuai/hong.jpg":["kuai/hong2.jpg","姓名：洪城","年龄：22","身高：167"],
                   "kuai/li.jpg":["kuai/li2.jpg","姓名：李斯丹妮","年龄：22","身高：168"],"kuai/liu.jpg":["kuai/liu2.jpg","姓名：刘忻","年龄：22","身高：166"],
                   "kuai/su.jpg" :["kuai/su2.jpg","姓名：苏妙玲","年龄：22","身高：168"],"kuai/yang.jpg":["kuai/yang2.jpg","姓名：杨洋","年龄：22","身高：170"]}
        function loadimg(){
            for (var img1src in data){
                var img1=document.createElement("img");
                var br=document.createElement("br");
                img1.src=img1src;
                img1.setAttribute("img2src",data[img1src][0]);
                img1.setAttribute("name",data[img1src][1]);
                img1.setAttribute("age",data[img1src][2]);
                img1.setAttribute("heightt",data[img1src][3]);
                img1.onmouseover=function (){
                    var Div=document.getElementById("details");
                    //alert(parseInt(document.event.clientX,10));
                    Div.style.left=parseInt(window.event.clientX,10)+parseInt("80px",10)+"px";
                    Div.style.top=window.event.clientY;
                    document.getElementById("bigimg").src=this.getAttribute("img2src");
                    document.getElementById("name").innerHTML=this.getAttribute("name");
                    document.getElementById("age").innerHTML=this.getAttribute("age");
                    document.getElementById("heightt").innerHTML=this.getAttribute("heightt");
                    Div.style.display="";

                }
                img1.onmouseout=function (){
                    var Div=document.getElementById("details");
                    Div.style.display="none";
                }

                document.body.appendChild(br);
                document.body.appendChild(img1);
            }
        }
    </script>
</head>
<body onload="loadimg()" >
<div id="details"
        style="position:absolute; display:none; top: 15px; left: 10px; height: 133px; width: 60px;">
<div id="bigimgdiv" style="float:left;">
<img id="bigimg" src="" alt=""
        style="position:absolute; width:300px; top: -4px; left: -3px;"  />
</div>
<div id="divdetails"
            style="float:left;width: 197px; position:absolute; top: 46px; left: 297px;">
<p id="name"></p>
<p id="age"></p>
<p id="heightt"></p>
</div>
</div>
</body>
</html>

楼主可能还没有接触jQuery把，不急，慢慢学号JS 之后再学jQuery之后，用jQuery写这些就太方便了、、、、

js

解决方案 »