我想在页面上画一条 X 轴，一条 Y轴，然后中心原点正好是鼠标的箭头处，随着鼠标的移动，X轴，Y轴，也跟着移动，能实现吗？

http://www.tastelife.net/javascript/mouse/tenstar.htm<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:black;
z-index:100;
font-size:1px;
}
-->
</style>
<script language="JavaScript">
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
//-->
</script>
<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
//放在<head>之间就可以一

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>testtitle>
    </head><body STYLE="background-color:transparent" leftmargin=0 topmargin=0 >
    <table border="1" cellpadding="1" cellspacing="1" width=100% height=100% onmousemove="moveTd()">
      <tr>
       <td id=td1 >2</td><td id=td2>5</td>
      </tr>
      <tr>
       <td id=td3 >1</td><td id=td4>4</td>
      </tr>      
    </table>
    <script>
    function moveTd(){
    var x = event.x;
    var y = event.y;
    window.status = "x:" + x + ";y:" +  y;
    document.all.td1.style.width = x - 5;
    document.all.td1.style.height = y -5  ;
    }
    </script>
    </body>
    </html>
      

  2.   

    <style>
    <!--
    #leftright, #topdown{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    layer-background-color:black;
    background-color:black;
    z-index:100;
    font-size:1px;
    }
    -->
    </style>
    <script language="JavaScript">
    <!--
    if (document.all&&!window.print){
    leftright.style.width=document.body.clientWidth-2
    topdown.style.height=document.body.clientHeight-2
    }
    else if (document.layers){
    document.leftright.clip.width=window.innerWidth
    document.leftright.clip.height=1
    document.topdown.clip.width=1
    document.topdown.clip.height=window.innerHeight
    }
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY-1
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX-1
    else
    topdown.style.pixelLeft=document.body.clientWidth-2
    }
    function followmouse2(e){
    //move cross engine for NS 4+
    document.leftright.top=e.y+1
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+1
    }
    if (document.all)
    document.onmousemove=followmouse1
    else if (document.layers){
    window.captureEvents(Event.MOUSEMOVE)
    window.onmousemove=followmouse2
    }
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    setTimeout("window.onresize=regenerate",400)
    }
    if ((document.all&&!window.print)||document.layers)
    //if the user is using IE 4 or NS 4, both NOT IE 5+
    window.onload=regenerate2
    //-->
    </script>
      

  3.   

    如果还不满意，你直接修改
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY-1 //就是这里
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX-1 //和这里
    else
    topdown.style.pixelLeft=document.body.clientWidth-2
    }
    这个函数
      

  4.   

    太感谢楼上的了，但是我发觉一个新的问题，
    我在你在代码中加入了一个函数，我把 vent.clientY+2  改成了 event.clientY-2
    然后我的鼠标的坐标就不对了，不是 X坐标变成了 0 就是 Y坐标变成了 0 ，还请多多指教！
    谢谢！var el=document.getElementById("showPos");
     el.style.left=event.clientX+10;
     el.style.top=event.clientY+document.body.scrollTop;
     el.innerHTML="X:"+event.offsetX+"        Y:"+event.offsetY";
      

  5.   

    我只是在你的函数里面加入了这段代码，还有在 followmouse1里面也加了
    var el=document.getElementById("showPos");
     el.style.left=event.clientX+10;
     el.style.top=event.clientY+document.body.scrollTop;
     el.innerHTML="X:"+event.offsetX+"        Y:"+event.offsetY;如下所示function followmouse2(e){
    //move cross engine for NS 4+
    document.leftright.top=e.y+1
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+1var el=document.getElementById("showPos");
     el.style.left=event.clientX+10;
     el.style.top=event.clientY+document.body.scrollTop;
     el.innerHTML="X:"+event.offsetX+"        Y:"+event.offsetY;}
      

  6.   

    又加入了一句
    <div id="showPos" border=1 style="POSITION:absolute"></div>是想随着鼠标的移动，在鼠标的边上显示当前鼠标的坐标