<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
}
body {
height: 1000px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById("box");
//alert(box);
//当事件给box绑定时,鼠标只有在box中时,div才会跟着鼠标动
//当事件绑定给整个页面(页面对象document)时,只要鼠标在HTML页面时事件就会被触发,次此时div能随着鼠标移动
document.onmousemove = function( event ) {
//alert("helllo");
//解决兼容问题
var event = event || window.event;
//#####
var ht = document.documentElement;
//获取鼠标的坐标
var left = event.clientX + ht.scrollLeft ;
var top = event.clientY + ht.scrollTop ;
//alert( left +","+ top);
/*滚动条问题
Chrome认为滚动条是body的 可以通过body.scrollTop来获取
火狐等浏览器认为滚动条是html的*/
//用鼠标的坐标 设置div的 偏移量(style) x,y(有单位单位为px)为div设置定位!!!!
box.style.left = left + "px";
box.style.top = top + "px";
}
</script>
鼠标跟div一起移动
最新推荐文章于 2022-10-25 12:04:46 发布