javascript 如何使图像根据鼠标移动而移动?(不要跟着老鼠!!)

y4ekin9u  于 2023-06-28  发布在  Java
关注(0)|答案(3)|浏览(146)

我需要随着鼠标的移动来移动一些图像。例如,如果图像位于(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;
  }
);

但问题是所有的图片都固定在左上角。
为了更清楚地描述
我有我的网页与多个图像在随机位置,我需要移动它,每当鼠标移动。我期望照片根据鼠标的移动方式移动,而不是跟随鼠标指针。

2vuwiymt

2vuwiymt1#

您忘记更新prevX和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 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;
  }
});

注意:这个解决方案仍然有一些“奇怪”的行为,首先,prevx和prevy最初可能不是0。简单的解决方案是只更新img的位置,如果prevx和prevy不为0。

qmelpv7a

qmelpv7a2#

确保要移动的图像已使用CSS设置了位置(位置:absolute;)或内联样式(style=“position:绝对值;”),以确保它们可以正确定位。当前,您正在根据绝对鼠标位置更新每个图像的位置。相反,您应该计算自上次事件以来鼠标移动的距离,并使用它来更新图像位置。修复了你的代码

var prevx = 0;
var prevy = 0;

// Move images with mouse
document.addEventListener("mousemove", function (event) {
    var images = document.getElementsByTagName("img");
    var newx = event.pageX;
    var newy = event.pageY;
    
    // Calculate the distance moved since the last event
    var dx = newx - prevx;
    var dy = newy - prevy;
    
    // Update the positions of all images
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        
        // Move the image by the distance moved by the mouse
        image.style.left = parseInt(image.style.left) + dx + "px";
        image.style.top = parseInt(image.style.top) + dy + "px";
    }
    
    // Update the previous mouse position
    prevx = newx;
    prevy = newy;
});
5rgfhyps

5rgfhyps3#

这应该对你有用。我还添加了如何保持图像包含在其父元素中。

const images = document.querySelectorAll('img');
let lastMouseX = null;
let lastMouseY = null;

// Start fresh if mouse leaves screen
document.addEventListener('mouseleave', () => {
  lastMouseX = null;
  lastMouseY = null;
});

document.addEventListener('mousemove', (ev) => {
  // Do nothing if this is the first event
  if (lastMouseX !== null) {
    const deltaX = ev.x - lastMouseX;
    const deltaY = ev.y - lastMouseY;
    for (const img of images) {
      let newLeft = img.offsetLeft + deltaX;
      let newTop = img.offsetTop + deltaY;
      // Keep in bounds
      const minLeft = 0;
      const minTop = 0;
      const maxLeft = img.parentElement.clientWidth - img.clientWidth;
      const maxTop = img.parentElement.clientHeight - img.clientHeight;
      newLeft = Math.max(minLeft, newLeft);
      newLeft = Math.min(maxLeft, newLeft);
      newTop = Math.max(minTop, newTop);
      newTop = Math.min(maxTop, newTop);
      // update
      img.style.left = newLeft + 'px';
      img.style.top = newTop + 'px';
    }
  }
  lastMouseX = ev.x;
  lastMouseY = ev.y;
});
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  padding: 20px;
}

body {
  position: relative;
}

div {
  position: fixed;
  width: 100px;
  height: 100px;
}

img {
  width: 50px;
  position: absolute;
}

.one {
  left: 0;
  top: 0;
}

.two {
  left: 0;
  bottom: 0;
}

.three {
  right: 0;
  top: 0;
}

.four {
  right: 0;
  bottom: 0;
}
<div class="one">
  <img
    src="https://i.kym-cdn.com/entries/icons/original/000/006/428/637738.jpg"
  />
</div>
<div class="two">
  <img
    src="https://i.kym-cdn.com/entries/icons/original/000/006/428/637738.jpg"
  />
</div>
<div class="three">
  <img
    src="https://i.kym-cdn.com/entries/icons/original/000/006/428/637738.jpg"
  />
</div>
<div class="four">
  <img
    src="https://i.kym-cdn.com/entries/icons/original/000/006/428/637738.jpg"
  />
</div>

我已经使用了offsetLeftoffsetTop,它们本质上与style.leftstyle.top相同,但不需要解析它。您还需要确保图像的位置为absolutefixed,以使style.leftstyle.top产生效果。

相关问题