js:鼠标点击跟随,鼠标按下拖拽图片,图片跟着鼠标移动,鼠标弹起图片停止跟随。
时间: 2024-05-07 09:17:21 浏览: 9
您需要使用JavaScript来实现此功能。首先,您需要为所需的元素添加mousedown、mousemove和mouseup事件监听器。mousedown事件将触发图片开始跟随鼠标移动,mousemove事件将使图片跟随鼠标移动,mouseup事件将停止图片跟随鼠标移动。以下是伪代码:
```
let isDragging = false;
let offset = { x:0, y:0 };
let image = document.getElementById("yourImageId");
image.addEventListener("mousedown", function(event) {
isDragging = true;
offset.x = event.clientX - image.offsetLeft;
offset.y = event.clientY - image.offsetTop;
});
image.addEventListener("mouseup", function(event) {
isDragging = false;
});
document.addEventListener("mousemove", function(event) {
if(isDragging) {
image.style.left = (event.clientX - offset.x) + "px";
image.style.top = (event.clientY - offset.y) + "px";
}
});
```
这应该可以实现您所需要的功能。