测试：offsetX|Y获取鼠标坐标值
<style>#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; }
#ball { position: absolute; width: 20px; height: 20px; left: 10px; top: 10px; border-radius: 50%; background: tan linear-gradient(transparent, red); transition: 1s; }
</style>
<div id="papa">
<span id="ball"></span>
</div>
<script>
papa.onclick = function(event) {
let xx = event.offsetX;
let yy = event.offsetY;
moveEle(ball, xx, yy);
}
//函数 ：移动元素
function moveEle(ele,x,y) {
let w = ele.offsetWidth, h = ele.offsetHeight;
ele.style.left = (x - w / 2) + 'px';
ele.style.top = (y - h / 2) + 'px';
}
</script>
鼠标单击帖子父框任何区域，小球会跟过去，小球的圆心坐标应该是鼠标点击的地方。
offsetX 和 offsetY获得的值是相对于目标元素（单击或移动的对象）而言，例如本例，鼠标单击事件是 #papa 对应的HTML元素：
papa.onclick = function(event) {
let xx = event.offsetX;
let yy = event.offsetY;
moveEle(ball, xx, yy);
}
就是说，只有单击 papa 元素时 offsetX|Y 有效，单击其外的元素无效，单击其内的元素得不到所需的值（例如单击小球）。
offsetX|Y 过去 Firefox 不支持，但它有一个 layerX|Y 可用、需要一个前提——被单击的元素使用了绝对定位。不过新版本的 Firefox 浏览器已经完美支持 offsetX|Y 。 这个有啥用呢？用处可大了去，本例命令小球到鼠标单击处就是一个用处，可以从中举一反三，去实现自己所需的功能和效果。 单击小球内部，会让小球直接回到初始位置{:4_173:} 我记得还有个帖子，是能判断单击是在小球的左侧还是右侧，从而让小球转向。 这个小球出不了这个框的。 加林森 发表于 2022-8-10 17:28
这个小球出不了这个框的。
对，不让它出框外的 红影 发表于 2022-8-10 15:48
单击小球内部，会让小球直接回到初始位置
在这里是这样，没有做相应处理 红影 发表于 2022-8-10 15:50
我记得还有个帖子，是能判断单击是在小球的左侧还是右侧，从而让小球转向。
对。但这里，仅测试一下 offsetX 和 offsetY，不做别的处理方法 马黑黑 发表于 2022-8-10 18:15
对，不让它出框外的
嗯嗯。明白的。 加林森 发表于 2022-8-10 18:38
嗯嗯。明白的。
这个就是专门获取帖子内部的鼠标单击位置 马黑黑 发表于 2022-8-10 18:39
这个就是专门获取帖子内部的鼠标单击位置
哦，是这样的啊。 和swf鼠标跟随效果差不多？ 马黑黑 发表于 2022-8-10 18:16
在这里是这样，没有做相应处理
这样也挺好的。 马黑黑 发表于 2022-8-10 18:16
对。但这里，仅测试一下 offsetX 和 offsetY，不做别的处理方法
嗯嗯，很有趣的制作{:4_204:} 红影 发表于 2022-8-10 21:24
嗯嗯，很有趣的制作
目的是测试 红影 发表于 2022-8-10 21:24
这样也挺好的。
仅仅为了测试，所以不做别的处理 小辣椒 发表于 2022-8-10 21:16
和swf鼠标跟随效果差不多？
原理一样。所以，h5的出现，是导致swf的消亡的外因之一 马黑黑 发表于 2022-8-10 21:54
仅仅为了测试，所以不做别的处理
嗯嗯，效果体现了。 红影 发表于 2022-8-11 21:24
嗯嗯，效果体现了。
对的
页:
[1]