javascript的语法错误

Question

在javascript中制作动画时我遇到了修复问题，但我没有看到它。我试图让pan使用“mover”函数，但我认为我错误地使用了“transformOrigin”中的属性，或者我错过了一些步骤，它也没有在控制台上出现错误。< / p>

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)" ...