js:鼠标点击跟随,鼠标按下拖拽图片,图片跟着鼠标移动,鼠标弹起图片停止跟随。
时间: 2024-05-07 19:17:06 浏览: 116
你想了解的应该是如何使用 JavaScript 实现鼠标拖动功能吧。这个功能可以通过监听鼠标事件来实现。我们可以在鼠标按下的时候添加一个 mousedown 事件监听器,然后在鼠标移动的过程中不断更新图片的位置,最后在鼠标弹起的时候移除事件监听器即可。以下是一个简单的实现示例:
```javascript
var img = document.querySelector('img');
img.addEventListener('mousedown', startDrag);
function startDrag(event) {
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
}
function drag(event) {
img.style.left = event.pageX + 'px';
img.style.top = event.pageY + 'px';
}
function endDrag(event) {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', endDrag);
}
```
这段代码会在图片被鼠标按下时添加一个 mousedown 事件监听器,然后在鼠标移动时不断更新图片的位置。最后在鼠标弹起时不再监听鼠标移动事件。具体实现方式可以根据实际需求进行调整。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)