JS示例34-鼠标跟随事件
2019-04-06 本文已影响0人
微小码
一、知识要点
1、onmousemove 鼠标移动事件（要考虑页面滚动）
2、var X = ev.clientX;
3、var Y = ev.clientY + scrollTop; // 加上了滚动距离
二、源码参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标跟随事件</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; // 获取事件对象event
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动距离
var X = ev.clientX;
var Y = ev.clientY + scrollTop; // 加上了滚动距离
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
