JS跟随鼠标移动的十字坐标代码

效果预览:

http://jsfiddle.net/dtdxrk/ygM5y/1/embedded/result/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JS跟随鼠标移动的十字坐标代码（兼容多浏览器ie,firefox）</title>
 <style type="text/css">
 body{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#ececec;}
 #x_div, #y_div { position:absolute; top:0;left:0; background-color:blue; width:100%; height:2px; }
 #y_div { height:100%; width:2px; }
 #Mouse{ position:absolute; display:none;color:blue;}
 #Mouse strong{ color:#f00;}
 </style>
 </head>
 
 <body>
 <div id="Mouse">X轴:<strong id="XXX"></strong> & Y轴:<strong id="YYY"></strong></div>
 
 <div id="x_div"></div>
 <div id="y_div"></div>
 
 
 <script>
 
 function mouseMove(event){
    var event = window.event || event;
     var x_div = document.getElementById("x_div"),
         y_div = document.getElementById("y_div"),
         Mouse = document.getElementById("Mouse"),
         top = event.clientY > (window.screen.availHeight/2) ? -30 : 10,
         left = event.clientX > (window.screen.availWidth/2) ? -120 : 20;
     
     document.getElementById("XXX").innerHTML = event.clientX; 
     document.getElementById("YYY").innerHTML = event.clientY;
     
     Mouse.style.top = event.clientY + top + "px";
     Mouse.style.left = event.clientX + left + "px";
     Mouse.style.display = "block";
     
     x_div.style.top = event.clientY + "px";
     y_div.style.left = event.clientX + "px";
 }
 
 document.onmousemove = mouseMove; 
 </script>
 </body>
 </html>

 

 

 

posted @ 2012-05-29 17:23  dtdxrk  阅读(1204)  评论(0)  编辑  收藏  举报