<style>
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
background: pink;
position: fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div></div>
<script src="./tools.js"></script>
<script>
// 通过点击鼠标,控制div的位置
// 让div位置与鼠标点击位置相同
// 获取鼠标点击时的坐标,设定为div标签定位的坐标数据
// 默认执行效果,定位之后,div的左上角与鼠标重合
// 如果需要其他位置与鼠标重合,就需要调整定位的数值
// 例如: 需要div中心位置与鼠标重合 : 定位数值 - div宽度高度的一半
var oDiv = document.querySelector(‘div‘);
// 给 document 整个文档添加点击事件
document.addEventListener(‘click‘ , function(e){
e = e || window.event;
// 如果需要div中心与鼠标位置重合
// 需要获取div的宽度,高度
// 注意:宽度高度,有px单位,要去掉
// var h = parseInt(myGetStyle(oDiv , ‘height‘));
// var w = parseInt(myGetStyle(oDiv , ‘width‘));
// 也可以通过标签占位,获取标签的宽度高度占位
// offsetHeight offsetWidth
// 直接获取数据数值,没有px单位的
var h = oDiv.offsetHeight;
var w = oDiv.offsetWidth;
console.log(h,w);
// 因为有页面滚动的问题
// 使用:clientX 和 clientY
// div中心与鼠标位置重合,需要再减去div宽度高度的一半
var top = e.clientY - h/2;
var left = e.clientX - w/2;
// 设定为 div 的定位数据 , 并且拼接px单位
oDiv.style.top = top + ‘px‘;
oDiv.style.left = left + ‘px‘;
})
</script>
