如何校正变焦镜头，使其不跳动，并根据其所在的图像显示并显示图像的结果

Question

怎样才能防止镜头在第一幅图像时跳动，并在缩放结果的div上正确显示缩放结果？

我怎样才能让镜头出现在其他图像上，而不是像 gif 中那样只出现在第一个图像上？如果不是，则跟随光标和其他图像的位置，看起来随光标位置缩放的结果是正确的。

我正在使用网格在网格或标尺中显示应用了缩放效果的图像。

这是我的CSS代码：

.imagen__cont__zoom .grid_contenedores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.imagen__cont__zoom .cont__img {
    width: 100%;
    overflow: hidden;
}

.imagen__cont__zoom .cont__img img {
    width: 300px;
    height: 300px;
    /*object-fit: cover;*/
}

.img__zoom__lente {
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 40px;
    height: 40px;
}

.img__zoom__resultado {
    border: 1px solid #d4d4d4;
    width: 300px;
    height: 300px;
}

在 html 中，我添加了几张要应用缩放的图像

这是我的html代码：

<div class="imagen__cont__zoom">
<div class="grid_contenedores">
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?city,night" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?space,night" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?montain,night" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?night" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?beach" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?vector" alt="Girl">
</div>
<div class="cont__img">
<img class="img__zoom" src="https://source.unsplash.com/random/?winter" alt="Girl">
</div>
</div>
<div class="img__zoom__lente"></div>
<div class="img__zoom__resultado"></div>
</div>

我认为我对镜头位置的计算方式是错误的，这就是为什么它没有根据镜头所在的图像，即光标的真实位置来显示。

这是我的 JavaScript 代码：

    var imgs, lens, result, cx, cy;
imgs = document.querySelectorAll('.img__zoom');
result = document.querySelector('.img__zoom__resultado');
lens = document.querySelector('.img__zoom__lente');

// Función para mover la lente
function moveLens(e) {
var pos, x, y, img;

// Calcula la posición de la lente
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
img = e.target;

// Evita que la lente se salga de la imagen
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}

// Establece la posición de la lente
lens.style.left = x + "px";
lens.style.top = y + "px";

// Calcula la relación entre el resultado y la lente
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;

// Ajusta el tamaño del resultado
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";

// Muestra el resultado
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}

// Función para obtener la posición del cursor
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = e.target.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}

// Agrega el evento de movimiento del mouse a cada imagen y a la lente
imgs.forEach(function(img) {
img.addEventListener("mousemove", moveLens);
});
lens.addEventListener("mousemove", moveLens);

Answer 1

请将下面的代码与您的版本进行比较。

正如评论中提到的

lens.addEventListener("mousemove", moveLens);

是没有必要的。

请研究

getCursorPos()

的新代码。

我还从

moveLens()

中删除了一些代码。

这个解决方案并不完美，因为它没有考虑图像之间的间隙。但您的几个问题已在下面的代码中得到解决。

var imgs, lens, result, cx, cy;
imgs = document.querySelectorAll('.img__zoom');
result = document.querySelector('.img__zoom__resultado');
lens = document.querySelector('.img__zoom__lente');

// Función para mover la lente
function moveLens(e) {
  var pos, x, y, img;

  // Calcula la posición de la lente
  pos = getCursorPos(e);
  x = pos.x - (lens.offsetWidth / 2);
  y = pos.y - (lens.offsetHeight / 2);
  img = e.target;

  // Establece la posición de la lente
  lens.style.left = x + "px";
  lens.style.top = y + "px";

  // Calcula la relación entre el resultado y la lente
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;

  // Ajusta el tamaño del resultado
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";

  // Muestra el resultado
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}

// Función para obtener la posición del cursor
function getCursorPos(e) {
  let x = e.clientX + window.scrollX;
  let y = e.clientY + window.scrollY;
  return {
    x: x,
    y: y
  };
}

// Agrega el evento de movimiento del mouse a cada imagen y a la lente
imgs.forEach(function(img) {
  img.addEventListener("mousemove", moveLens);
});

.imagen__cont__zoom .grid_contenedores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.imagen__cont__zoom .cont__img {
  width: 100%;
  overflow: hidden;
}

.imagen__cont__zoom .cont__img img {
  width: 300px;
  height: 300px;
  /*object-fit: cover;*/
}

.img__zoom__lente {
  position: absolute;
  border: 1px solid #d4d4d4;
  width: 40px;
  height: 40px;
}

.img__zoom__resultado {
  border: 1px solid #d4d4d4;
  width: 300px;
  height: 300px;
}

<div class="imagen__cont__zoom">
  <div class="grid_contenedores">
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?city,night" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?space,night" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?montain,night" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?night" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?beach" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?vector" alt="Girl">
    </div>
    <div class="cont__img">
      <img class="img__zoom" src="https://source.unsplash.com/random/?winter" alt="Girl">
    </div>
  </div>
  <div class="img__zoom__lente"></div>
  <div class="img__zoom__resultado"></div>
</div>