如何解决这个特定的 "Expected an assignment or function call and instead saw an expression." 用于 JS 图像缩放？

Question

为了理解图像缩放如何与 JS 一起工作，我遵循了 kennethknudsen 的代码： enter link description here 稍作改动（当然，所有代码归功于原始编码员。）

但是，代码似乎没有运行为三元条件给出错误“预期赋值或函数调用，而是看到一个表达式”。它在原始代码上给出了相同的错误，但似乎运行代码很好，而我的代码却没有。如何解决这个问题，以及当我遇到另一个这样的错误时我应该怎么做。 “期待一项任务......看到一个表达”在未来？一个关于 codegrepper 的论坛提到在代码块中包含 return() 但我不确定这是否适用于（以及适用于何处）当前问题。

//IMAGE2 FUNCTIONS
const image2 = document.querySelector(".zoom");

function zoom(e){
  let zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX;
  x = offsetX / zoomer.offsetWidth * 100;
  y = offsetY / zoomer.offsetHeight * 100;
  zoomer.style.backgroundPosition  = x + "%" + y + "%";
}

image2.addEventListener('mouseenter',function(e){
  zoom(event);
});

.image2-container{
  background-position: 50% 50%;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.image2{
  transition: opacity 0.5s; 
  display: block;
  width: 100%;
  
  &:hover{
  opacity: 0;
  }
}

<div class="image2-container zoom">
  <img class ="image2"src="https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg"  alt="">
    
  </div>

Answer 1

你需要

给容器一个你正在缩放的图像的背景图像，就像在另一个演示中一样，这样图像就有两个元素。如果只有 <img> 有它，它不会工作。
您收到的警告是因为您滥用条件运算符来替代 if/else。这个：

e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;

应该是

if (e.offsetX) offsetX = e.offsetX;
else offsetX = e.touches[0].pageX;

或者，甚至更好

offsetX = e.offsetX || e.touches[0].pageX;

或者，更好的是，不要隐式创建全局变量：

const offsetX = e.offsetX || e.touches[0].pageX;

e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX; 看起来像是打字错误 - 请参考那里的 .pageY 和 .offsetY，而不是 .pageX 和 .offsetX

document.querySelector('.zoom').addEventListener('mousemove', zoom);

function zoom(e) {
  const zoomer = e.currentTarget;
  const offsetX = e.offsetX || e.touches[0].pageX;
  const offsetY = e.offsetY || e.touches[0].pageY;
  x = offsetX / zoomer.offsetWidth * 100
  y = offsetY / zoomer.offsetHeight * 100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

.zoom img:hover {
  opacity: 0;
}

.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

<div class="zoom" style="background-image: url(https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg)">
  <img src="https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg" />
</div>

Answer 2

首先，您正确地更改了 background-position，但缩放器实际上没有背景。所以去掉图片标签，在css文件中设置背景url(...)。接下来，您需要实际放大，因为您正在根据鼠标位置移动图像。这很简单，只需添加 zoomer.style.backgroundSize = [some percentage];

所有这些放在一起的结果是：

const image2 = document.querySelector(".zoom");

    function zoom() {
      let e = window.event;
      let zoomer = image2;
      e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
      e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX;
      x = offsetX / zoomer.offsetWidth * 100;
      y = offsetY / zoomer.offsetHeight * 100;
      zoomer.style.backgroundSize = "500%";
      zoomer.style.backgroundPosition  = x + "%" + y + "%";
    }

    image2.addEventListener('mousemove', zoom);

.image2-container {
            background: url(https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg);
          background-position: 50% 50%;
          position: relative;
          overflow: hidden;
          cursor: zoom-in;
          height: 75vh;
          aspect-ratio: 1 / 1;
        }
        .image2 {
          transition: opacity 0.5s; 
          display: block;
          width: 100%;
        }
        .image2:hover {
            opacity: .5;
        }

<div class="image2-container zoom">
</div>

如何解决这个特定的 "Expected an assignment or function call and instead saw an expression." 用于 JS 图像缩放？

How to resolve this particular "Expected an assignment or function call and instead saw an expression." for JS image zoom?

javascript

image

zooming