放大悬停无法使用正确的位置

Question

我正在尝试创建将在悬停时使用 jQuery 缩放图像的应用程序。问题是图像没有在正确的位置放大，我无法找出问题所在。

 zoomIn = function (event) {
  var pre = document.getElementById("preview");
  pre.style.visibility = "visible";
  if ($('#zoom1').is(':hover')) {
        var img = document.getElementById("zoom1");
		pre.style.backgroundImage = "url('https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg')";
    }

  var posX = event.offsetX;
  var posY = event.offsetY;
  pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";

}

zoomOut = function () {
  var pre = document.getElementById("preview");
  pre.style.visibility = "hidden";
}

#preview{
	margin-top: 10px;
	border:1px solid black;
	width:350px;
	height:500px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}
#samples{
	text-align: center;
}
#samples img {	
	margin: 10px;
	display: block;
	 border: 2px solid #6A6462;
}
#samples img:hover {
	 cursor: zoom-in;
	 border: 0;
	 -moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
	-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
	box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
	#samples img {
		display: inline-block;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
	<div class="row">
		<div class="col-lg-6" id="samples">
			<img class="img-fluid" id="zoom1" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
			
		</div>
		<div class="col-lg-6">
			<div id="preview" onmousemove="zoomIn(event)"></div>
		</div>
	</div>
</div>

为了完整的演示，我已经将代码上传到jsfiddle。

Answer 1

您有很多混合代码，有时会导致语法错误或编码问题。我会考虑将其全部移至 jQuery。

例如，请参阅以下内容：

$(function() {
  function zoomIn(event) {
    var img = $(event.target);
    var pre = $("#" + img.data("preview"));
    var high;
    if ($(".highlight").length === 1) {
      high = $(".highlight");
    } else {
      high = $("<div>", {
        class: "highlight",
        width: Math.round(pre.width() / 5.5) + "px",
        height: Math.round(pre.height() / 2.5) + "px",
      }).css({
        top: 0,
        left: 0
      }).appendTo(img.parent());
    }
    pre.css("visibility", "visible");
    if (img.is(':hover')) {
      pre.css("background-image", "url('" + img.attr("src") + "')");
    }

    var posX = event.offsetX;
    var posY = event.offsetY;
    high.css({
      left: posX + "px",
      top: posY + "px"
    });
    pre.css("background-position", (-posX * 2.5) + "px " + (-posY * 5.5) + "px");
  }

  function zoomOut(event) {
    $(".preview").css({
      "background-image": "",
      visibility: "hidden"
    });
    $(".highlight").remove();
  }

  $("img").mouseover(zoomIn).mousemove(zoomIn).mouseout(zoomOut);
});

.preview {
  margin-top: 10px;
  border: 1px solid black;
  width: 350px;
  height: 500px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

.highlight {
  border: 1px dotted #ccc;
  background-color: rgba(255, 255, 255, .25);
  position: absolute;
}

.samples {
  text-align: center;
  position: relative;
}

.samples img {
  margin: 10px;
  display: block;
  border: 2px solid #6A6462;
}

.samples img:hover {
  cursor: zoom-in;
  border: 0;
  -moz-box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, 1), -1px -1px 7px 2px rgba(130, 130, 130, 1);
  -webkit-box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, .7), -1px -1px 7px 2px rgba(130, 130, 130, 1);
  box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, .7), -2px -2px 7px 2px rgba(130, 130, 130, 1);
}

@media screen and (max-width: 767px) {
  .samples img {
    display: inline-block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 samples" id="sample-1">
      <img class="img-fluid" id="zoom-1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" data-preview="preview-1">
    </div>
    <div class="col-lg-6">
      <div id="preview-1" class="preview"></div>
    </div>
  </div>
</div>

我还尝试考虑更便携的脚本代码。我怀疑您将拥有超过 1 个示例图像，并且可能有多个预览区域。你会看到我调整了很多 HTML 元素的 ID 和类，使它们更容易处理。

为了帮助将 img 绑定到特定的预览窗口，我使用了 data 属性 (data-preview='preview-1')。这再次有助于使代码可移植并适用于许多图像和预览或许多图像和 1 个预览。命名，image-1，preview-1 等对 jQuery 很有帮助。您并没有大量使用它，而是需要考虑一些事情。

预览有效，您现在可以根据需要调整视图值。希望这会有所帮助。