我需要随着鼠标的移动来移动一些图像。例如,如果图像位于(0,0),鼠标位于(32,45)并移动到(32,47),则图像应移动到(0,2),即移动图像到2px y方向
我尝试了以下方法,但图像像一条线索一样跟随。
var prevx = 0;
var prevy = 0;
//move images with mouse
document.addEventListener("mousemove", function (event) {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var newx = event.pageX;
var newy = event.pageY;
var dx = newx - prevx;
var dy = newy - prevy;
//move image dx to left and dy to top
image.style.left = parseInt(image.style.left) + dx + "px";
image.style.top = parseInt(image.style.top) + dy + "px";
}
}
);
- 更新**
如前所述,我将代码更新为以下内容
var prevx = 0;
var prevy = 0;
//move images with mouse
document.addEventListener("mousemove", function (event) {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var newx = event.pageX;
var newy = event.pageY;
if (prevx!=0 && prevy!=0){
var image = images[i];
var dx = newx - prevx;
var dy = newy - prevy;
//move image dx to left nad dy to top
image.style.left = parseInt(image.style.left) + dx + "px";
image.style.top = parseInt(image.style.top) + dy + "px";
}
}
prevx = newx;
prevy = newy;
}
);
但问题是所有的图片都固定在左上角。
为了更清楚地描述
我有我的网页与多个图像在随机位置,我需要移动它,每当鼠标移动。我期望照片根据鼠标的移动方式移动,而不是跟随鼠标指针。
3条答案
按热度按时间2vuwiymt1#
您忘记更新prevX和Y,并添加了一些类似的内容:
注意:这个解决方案仍然有一些“奇怪”的行为,首先,prevx和prevy最初可能不是0。简单的解决方案是只更新img的位置,如果prevx和prevy不为0。
qmelpv7a2#
确保要移动的图像已使用CSS设置了位置(位置:absolute;)或内联样式(style=“position:绝对值;”),以确保它们可以正确定位。当前,您正在根据绝对鼠标位置更新每个图像的位置。相反,您应该计算自上次事件以来鼠标移动的距离,并使用它来更新图像位置。修复了你的代码
5rgfhyps3#
这应该对你有用。我还添加了如何保持图像包含在其父元素中。
我已经使用了
offsetLeft
和offsetTop
,它们本质上与style.left
和style.top
相同,但不需要解析它。您还需要确保图像的位置为absolute
或fixed
,以使style.left
和style.top
产生效果。