javascript 的语法错误

Question

在 javascript 中制作动画时，我遇到了要解决的问题，但我没有看到它。我试图让平底锅与 "mover" 函数一起工作，但我认为我错误地使用了 "transformOrigin" 中的属性，或者我错过了一些步骤，它也没有出现错误控制台。

function cambio(c) {
  document.getElementById("pb").src=c;
}
function zoom() {
  document.getElementById("pb").style.transform="scale(1.8)";   
}
function zoomout() {
  document.getElementById("pb").style.transform="";
}
function mover(element) {
  document.getElementById("pb").style.transformOrigin=((event.pageX - element.offsetLeft) / element.width) * 100 + "% " + ((event.pageY - element.offsetTop) / element.height) * 100 + "%";
}

body {
  display: flex;
  flex-flow: row nowrap;
}
#big {
  width: 300px;
  height: 250px;
  overflow: hidden;
}
#pb{
  width: 300px;
  transition: transform 0.25s ease;
}
#tumbnail {
  width: 60px;
  overflow: hidden;
}
#tumbnail img{
  width: 60px
}
#tumbnail img:hover {
  opacity: 0.5;
  transition: all 300ms ease;
}

<div id="tumbnail">
 <a href=""><img src="http://www.cosmoscreativeagency.com/imagenes/1.jpg" onmouseover="cambio('http://www.cosmoscreativeagency.com/imagenes/1.jpg')" ></a>
 <a href=""><img src="http://www.cosmoscreativeagency.com/imagenes/2.jpg" onmouseover="cambio('http://www.cosmoscreativeagency.com/imagenes/2.jpg')" ></a>
 <a href=""><img src="http://www.cosmoscreativeagency.com/imagenes/3.jpg" onmouseover="cambio('http://www.cosmoscreativeagency.com/imagenes/3.jpg')" ></a>
 <a href=""><img src="http://www.cosmoscreativeagency.com/imagenes/4.jpg" onmouseover="cambio('http://www.cosmoscreativeagency.com/imagenes/4.jpg')" ></a>
</div>
<div id="big">
 <img src="http://www.cosmoscreativeagency.com/imagenes/1.jpg" id="pb" onmouseover="zoom()" onmouseout="zoomout()" onmousemove="mover(this)">
</div>

Answer 1

你必须通过this。

所以

function mover(element) {
  document.getElementById("pb").style.transformOrigin=((event.pageX - element.offsetLeft) / element.width) * 100 + "% " + ((event.pageY - element.offsetTop) / element.height) * 100 + "%";
}

和

... onmousemove="mover(this)" ...

javascript 的语法错误

syntax error for javascript

javascript

css

animation

zooming

pan