javascript - Jquery 缩放，悬停时只缩放一张图像

Question

我正在尝试制作一个带有图库(侧面可点击的小缩略图)的产品页面，它会在右侧打开一个大图像。jquery zoom 只显示第一个图像的缩放，当显示其他图像时，缩放仍在第一个图像上。

这是我的代码:HTML

<section class="product-page">
        <div class="thumbnails">
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></a></div>
            <div class="thumb"><a href="#"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></a></div>
        </div>
        <div class="img-display">
            <span class='zoom' id='shoe1'>
                <img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
            </span>
            <span class='zoom1' id='shoe1'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
            </span>
            <span class='zoom' id='shoe3'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
            </span>
            <span class='zoom' id='shoe4'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
            </span>
            <span class='zoom' id='shoe5'>
                <img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
            </span>
        </div>
    </section>

点击缩略图改变图片的JS

    var img = document.getElementById("img-area");
        function right(){
            img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
        }
        function left(){
            img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
        }
        function bottom(){
            img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
        }
        function pairSide(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
        }
        function pairTop(){
            img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
        }

和Jquery代码

$(document).ready(function(){
    $('#shoe1').zoom();
    $('#shoe2').zoom();
    $('#shoe3').zoom();
    $('#shoe4').zoom();
    $('#shoe5').zoom();
});

如何使更改后的图像在悬停时放大？提前致谢。

Answer 1

在不造成重复性劳损的情况下，可以实现如此简单的事情。

出于明显的原因，我没有考虑图像预加载等，但我希望您能从中获得灵感。

您的 img-display 应该被视为 Canvas 。将单个事件处理程序绑定(bind)到环绕拇指的链接，拇指的 href 属性包含您要在 Canvas 区域中加载的较大图像。此事件处理程序只是旋转您的缩略图，但使用较大的图像并将其传递给 Canvas 图像和 jQuery 缩放插件 API，同时切换拇指的事件状态(作为美学建议)。

为什么href？例如，屏幕阅读器仍然需要能够访问这些链接。我正在考虑可访问性 ftw。

图片由 JD Sports 提供.

$(function() {
  $('.zoom').zoom();
  $('.thumb').on('click', 'a', function(e) {
    e.preventDefault();
    var thumb = $(e.delegateTarget);
    if (!thumb.hasClass('active')) {
      thumb.addClass('active').siblings().removeClass('active');
      $('.zoom')
        .zoom({
          url: this.href
        })
        .find('img').attr('src', this.href);
    }
  });
});

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.product-page {
  display: flex;
}

.img-display {
  flex-grow: 1;
  max-width: 372px;
}

.thumb {
  opacity: .7;
  margin: 0 .25rem .25rem 0;
  width: 120px;
  transition: opacity .25s ease-out;
}

.thumb:hover,
.thumb.active {
  opacity: 1;
}

.zoom {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<section class="product-page">
  <div class="thumbnails">
    <div class="thumb active">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
      </a>
    </div>
    <div class="thumb">
      <a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
        <img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
      </a>
    </div>
  </div>
  <div class="img-display">
    <span class="zoom">
      <img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
    </span>
  </div>
</section>