当鼠标在大盒子中移动时,在小盒子中显示坐标
时间: 2024-03-26 20:35:36 浏览: 22
好的,这是一个基本的前端交互问题。你需要在 HTML 中创建一个大盒子和一个小盒子,然后使用 JavaScript 监听大盒子的鼠标移动事件。在事件处理程序中,获取鼠标在大盒子中的坐标,并将其转换为在小盒子中的坐标。最后,将小盒子的坐标更新为转换后的坐标即可。
下面是一个示例代码:
```html
<div id="bigBox" style="width: 300px; height: 300px; background-color: #eee;">
<div id="smallBox" style="width: 50px; height: 50px; background-color: #ccc;"></div>
</div>
<script>
const bigBox = document.getElementById('bigBox');
const smallBox = document.getElementById('smallBox');
bigBox.addEventListener('mousemove', (event) => {
const bigBoxRect = bigBox.getBoundingClientRect();
const smallBoxRect = smallBox.getBoundingClientRect();
const x = event.clientX - bigBoxRect.left;
const y = event.clientY - bigBoxRect.top;
const smallBoxX = x / bigBoxRect.width * smallBoxRect.width;
const smallBoxY = y / bigBoxRect.height * smallBoxRect.height;
smallBox.style.transform = `translate(${smallBoxX}px, ${smallBoxY}px)`;
});
</script>
```
这段代码会在大盒子中监听鼠标移动事件,并将小盒子的位置更新为鼠标在大盒子中的坐标。注意,这里使用了 `getBoundingClientRect()` 方法来获取盒子的位置和大小,以确保计算准确。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)