一当凡、知識(shí)要點(diǎn)
1帝火、onmousemove 鼠標(biāo)移動(dòng)事件（要考慮頁面滾動(dòng)）
2括丁、var X = ev.clientX;
3凌箕、var Y = ev.clientY + scrollTop; // 加上了滾動(dòng)距離
二鸯檬、源碼參考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠標(biāo)跟隨事件</title>
<style>
#div1 {
font-size: 10px;
width: 150px;
height: 150px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
document.onmousemove = function (ev) {
var ev = ev || event; // 獲取事件對(duì)象event
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滾動(dòng)距離
var X = ev.clientX;
var Y = ev.clientY + scrollTop; // 加上了滾動(dòng)距離
oDiv.style.left = X + 'px';
oDiv.style.top = Y + 'px';
var show = "<div>(" + X + "," + Y + ")</div>";
show += "<div>oDiv.style.left / X = " + X + "px</div>";
show += "<div>oDiv.style.top / Y = " + Y + "px</div>";
oDiv.innerHTML = show;
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
image
image.png
