鼠标在图片上画矩形问题

本帖最后由 yb871201 于 2010-10-21 11:31:44 编辑

解决方案 »

  1.   

    onmousemove的事件中要做动作了首先设一个全局的变量tag = false;
    在onmousedown tag= true
    在onmouseup tag = falseonmousemove时，时刻计算这个矩形框，然后弄个div层（半透明）覆盖这个矩形框，
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鼠标捕获事件</title>
    <script>
    var tag = false;
    function aa(e)
    {
    var e1 = e || window.event;
    document.getElementById("x").value = e1.clientX;
    document.getElementById("y").value = e1.clientY;
    tag = true;
    this.md();
    }
    function bb(e)
    {
    tag = false;
    var e1 = e || window.event;
    var kk = e1.clientX-document.getElementById("x").value;
    var gg = e1.clientY-document.getElementById("y").value;
    document.getElementById("k").value = kk;
    document.getElementById("g").value = gg;
    }
    function md()
    {
    tag = true;
     //alert('ok');
     d.style.display="";
     d.setCapture();
     d.onmouseup=d.onlosecapture=mu;
     d.onmousemove=mv;
     d.startX=event.clientX;
     d.startY=event.clientY;
     d.style.left=event.x;
     d.style.top=event.y;
     d.style.width=0;
     d.style.height=0;
    }
    function mu()
    {
     d.releaseCapture();
     d.style.display="none";
    }
    function mv()
    {
     var x2=event.clientX;
     var y2=event.clientY;
     x=Math.min(d.startX,x2);
     y=Math.min(d.startY,y2);
     x1=Math.max(d.startX,x2);
     y1=Math.max(d.startY,y2);
     with(d.style){
     left=x;
     top=y;
     width=x1-x;
     height=y1-y;
      }
    }
    </script>
    </head><body onmousedown="md()">

    <div style="border:#000 1px dotted;position:absolute;overflow:hidden;background-Color:#EFEFEF;display:none;" id="d"></div>

    X:<input type="text" id="x" name="x" /> Y:<input type="text" id="y" name="y" /> 宽:<input type="text" id="k" name="k" /> 高:<input type="text" id="g" name="g" />
    <div style="background-image:url(太阳能 9-16.jpg); width:1123px; height:770px; border:1px solid:#000000;" onmousedown="aa(event)" onmouseup="bb(event)" id="t"></div>
    </body>
    </html>还是不好使。 我主要把注释去掉就不好使了
      

  3.   

    单独运行他的代码就好使的<script>
    function md(){
     d.style.display="";
     d.setCapture();
     d.onmouseup=d.onlosecapture=mu;
     d.onmousemove=mv;
     d.startX=event.clientX;
     d.startY=event.clientY;
     d.style.left=event.x;
     d.style.top=event.y;
     d.style.width=0;
     d.style.height=0;
    }
    function mu(){
     d.releaseCapture();
     d.style.display="none";
    }
    function mv(){
     var x2=event.clientX;
     var y2=event.clientY;
     x=Math.min(d.startX,x2);
     y=Math.min(d.startY,y2);
     x1=Math.max(d.startX,x2);
     y1=Math.max(d.startY,y2);
     with(d.style){
      left=x;
      top=y;
      width=x1-x;
      height=y1-y;
     }
    }
    </script>
    <body onmousedown=md() >
    <div style="border:#000 1px dotted;position:absolute;overflow:hidden;background-Color:#EFEFEF;display:none;" id="d"></div>