画像のズームにおける座標の求め方が分かりません。

「jQuery標準デザイン講座P267」からの引用です。

https://portfolio04222020.web.fc2.com/question/index.html
// zoom.jpgの位置を調整
$("#zoom img").css("top", ($("#thumb").offset().top - posY)*10);
$("#zoom img").css("left", ($("#thumb").offset().left - posX)*10);

「($("#thumb").offset().top - posY)*10」と「($("#thumb").offset().left - posX)*10」の
箇所が何を意味しているかが分かりません。

spanの位置（要素左上の座標）は「$("span").css({"top":posY, "left":posX});」より、
(posX, posY)なので、それぞれの値を１０倍にすればいいようにも思うのですがよく分かりません。

（解説書の説明文）
https://portfolio04222020.web.fc2.com/question/test.jpg
「span要素の位置を参照して、拡大画像#zoom imgを移動させます。
#thumbと#zoomは１：１０の関係にしてあるので、#zoom imgの移動量は、
#thumbからspan要素までの距離の１０倍になります。」

thumb.jpg : 400(px)✕400(px)
zoom.jpg : 4000(px)✕4000(px)

$(function(){
  // マウスを動かす
  $(window).mousemove(function(e){
    // カーソルが#thumbの中に収まっているかどうか
    if(e.pageX > $("#thumb").offset().left && e.pageX <= $("#thumb").offset().left + $("#thumb").width() && e.pageY >= $("#thumb").offset().top && e.pageY <= $("#thumb").offset().top + $("#thumb").height()){
      // 座標を取得
      var posX = e.pageX;
      var posY = e.pageY;

      // span要素が#thumb内に収まるよう調整（横位置）
			if(e.pageX <= $("#thumb").offset().left + 20){
				posX = $("#thumb").offset().left;
			}else if(e.pageX >= $("#thumb").offset().left + $("#thumb").width() - 20){
				posX = $("#thumb").offset().left + $("#thumb").width() - 40;
			}else{
				posX -= 20;
			}

      // span要素が#thumb内に収まるよう調整（縦位置）
			if(e.pageY <= $("#thumb").offset().top + 20){
				posY = $("#thumb").offset().top;
			}else if(e.pageY >= $("#thumb").offset().top + $("#thumb").height() - 20){
				posY = $("#thumb").offset().top + $("#thumb").height() - 40;
			}else{
				posY -= 20;
			}

      // span要素の位置を、カーソル座標に合わせる
      $("span").css({"top":posY, "left":posX});

      // 収まっている：span要素を表示
      $("span").show();

      // zoom.jpgの位置を調整
      $("#zoom img").css("top", ($("#thumb").offset().top - posY)*10);
      $("#zoom img").css("left", ($("#thumb").offset().left - posX)*10);

    }else{
      // 収まっていない：span要素を非表示
      $("span").hide();
    }
  });
});

@charset "UTF-8";

body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	background:#83828A;
}

#wrapper{
	width:830px;
	margin:0 auto;
	overflow:hidden;
}

h1{
	margin:50px 0;
	color:#F5DA49;
	font-size:4.5em;
	font-weight:bold;
	text-align:center;
}

#wrapper div{
	border:1px solid #F5DA49;
}

#thumb{
	width:400px;
	height:400px;
	float:left;
}

#thumb img{
	width:100%;
}

span{
	width:40px;
	height:40px;
	position:absolute;
	display:none;
	border:1px solid #83828A;
	background:rgba(131, 130, 138, .5);
}

#zoom{
	width:400px;
	height:400px;
	overflow:hidden;
	float:right;
	position:relative;
}

#zoom img{
	position:absolute;
	top:0;
	left:0;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson29</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
  <h1>Zoom</h1>
  <div id="thumb">
    <img src="img/thumb.jpg" width="400" height="400" alt="thumbnail">
    <span></span>
  </div>
  <div id="zoom">
    <img src="img/zoom.jpg" width="4000" height="4000" alt="zoom">
  </div>
</div>
</body>
</html>