Увеличение при наведении не работает в правильном положении

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 образца изображения и, возможно, несколько областей предварительного просмотра. Вы увидите, что я изменил ID и классы многих HTML-элементов, чтобы их было проще найти.

Чтобы связать img с конкретным окном предварительного просмотра, я использовал атрибут данных (data-preview='preview-1'). Опять же, это помогает сделать код переносимым и полезным для многих изображений и предварительного просмотра или для многих изображений и 1 предварительного просмотра. Имена, image-1, preview-1 и т. Д. Полезны для jQuery. Вы не используете это широко, но что-то нужно учитывать.

Предварительный просмотр работает, и теперь вы можете настроить значения представления по своему усмотрению. Надеюсь, это поможет.