您的位置：首页 > Web前端 > JavaScript

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

2012-05-29 17:23 387 查看
效果预览:

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航