首頁 > 開發者 > JavaScript
javascript滑鼠後面跟當前座標
DEMO:http://blog.snowinmay.net/javascript/js-event2.html
思路：
1.用event.clientX和event.clientY取出當前座標。
2.用一個元素來放輸出的內容（用innerHTML輸出即可）。
3.寫容器的樣式。
//代碼：
<script type="text/javascript">
///document.onmousemove =
function show_coords(event){
var input = document.getElementById('input');
var e = window.event||event;
var x = e.clientX;
var y = e.clientY;
//input.value = x + "," + y;
var say = document.getElementById('coords');
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
say.style.display = "inline-block";
}
</script>
<style>
2body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
span{
padding: 0 5px;
background: red;
font-size: 12px;
line-height: 18px;
border-radius: 3px;
display: none;
}
</style>
</head>
<body onmousemove="show_coords(event)">
<span id="coords"></span>
</body>
一開始將事件載入body上，發現對firefox會出現問題。後來把事件加在document上，就沒問題了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
