一个简单的小练习,实现当鼠标移动时,div块跟随鼠标的移动而移动,需要注意的是只有开启div的定位,div才会移动
onmousemove:鼠标移动事件
clientX和clientY:获取鼠标在当前可见窗口的坐标
scrollTop:垂直滚动条滚动的距离
scrollLeft:水平滚动条滚动的距离
- 在chrome中,scrollTop和scrollLeft是body的属性,而在火狐中则是属于html的属性,所以要注意兼容性的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div随鼠标移动</title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box1 = document.getElementById("box1");
document.onmousemove = function(event) {
// 解决兼容性问题
event = event || window.event;
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + sl + "px";
box1.style.top = top + st +"px";
};
};
</script>
</head>
<body style="height:1800px;width:1800px">
<div id="box1" ></div>
</body>
</html>
注意:clientX和clientY只获取鼠标在当前可见窗口的坐标(即相对于下图绿色框的左上角坐标),而div的移动偏移量是相对于整个页面的(即相对于下图红色框的左上角坐标)。由于页面的大小会大于当前的窗口大小,所以在这种情况下,div的偏移量会出现偏差,而实际div的偏移量应该是鼠标的坐标加上滚动条滚动的距离。