急！想在网页一小矩形框内，做一个随鼠标动的十字形

style="cursor:crosshair;"
event.clientX
event.clientY

解决方案 »

  1.   

    <body>
    <div id="cross" style="position:absolute;width:600px;height:400px;background-color:gray;display:inline-block;overflow:hidden">
    <div id="cross1" style="position:absolute;top:0px;left:-300px;border:solid 1px,black;width:600px;height:400px"></div>
    <div id="cross2" style="position:absolute;top:200px;left:0px;border:solid 1px,black;width:600px;height:400px"></div>
    <div id="label1" style="position:absolute"></div>
    </div>
    <script language="javascript">
    var allArea=document.getElementById("cross");
    var crossH=document.getElementById("cross1");
    var crossV=document.getElementById("cross2");
    var showLabel=document.getElementById("label1");

    allArea.onmousemove=function()
    {
    crossH.style.left=event.clientX-600;
    crossV.style.top=event.clientY;
    showLabel.innerHTML="X:"+event.clientX+",Y:"+event.clientY;
    showLabel.style.top=event.clientY+5;
    showLabel.style.left=event.clientX+10;
    }
    </script>
    </body>
      

  2.   

    谢谢kangqin(小康) ，似了一下，有两个问题还不知如何解决呢，
    一是，当需要上下或左右滚屏时，显示位置就不正确了，
    二是，当背景换成其它颜色时，边框显示就能看到，那个放的矩形框了。
      

  3.   

    主要是说明原理，其他问题都是枝节了．
    1、加上offset做补偿，多少由scroll决定
    ２、只让组成十字的两个框的某一边有border就ＯＫ