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

最新推荐文章于 2022-11-21 20:53:33 发布

weixin_30347335

最新推荐文章于 2022-11-21 20:53:33 发布

阅读量146

点赞数

原文链接：http://www.cnblogs.com/dtdxrk/archive/2012/05/29/2524300.html

版权

效果预览:

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>

转载于:https://www.cnblogs.com/dtdxrk/archive/2012/05/29/2524300.html

weixin_30347335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫