0
点赞
收藏
分享

微信扫一扫

[js] 元素随着鼠标移动(在父div下)


<div>
<p></p>
</div>

* {
margin: 0;
padding: 0;
}

body {
height: 5000px;
}

div {
width: 300px;
height: 300px;
border: 20px solid #000;
margin: 50px auto;
position: relative;
}

p {
width: 50px;
height: 50px;
background: pink;
position: absolute;
top: 0;
left: 0;
}

// 获取标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');

// 父级标签 和 页面的间距
var oDivLeft = oDiv.offsetLeft;
var oDivTop = oDiv.offsetTop;

// 父级标签 边框线宽度
var oDivBorderLeft = oDiv.clientLeft;
var oDivBorderTop = oDiv.clientTop;

// 父级标签占位 内容+padding
var oDivWidth = oDiv.clientWidth;
var oDivHeight = oDiv.clientHeight;

// 获取标签占位 内容+padding+border
var oPWidth = oP.offsetWidth;
var oPHeight = oP.offsetHeight;

// 给div添加点击事件
oDiv.addEventListener('click', function (e) {
// 计算 p标签定位的数据
// 定位数值 = 鼠标点击坐标 - 父级左侧间距 - 父级左侧边框线宽度 - 定位标签占位/2
var x = e.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
var y = e.pageY - oDivTop - oDivBorderTop - oPHeight / 2;

// 极值的判断

// 最小值是0
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;

// 最大值 父级占位(内容+padding) - 定位标签占位(内容+padding+border)
x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;

// 将结果赋值给 定位标签 定位属性
oP.style.left = x + 'px';
oP.style.top = y + 'px';

})

[js] 元素随着鼠标移动(在父div下)_获取标签


举报

相关推荐

0 条评论