Jquery 縮放，僅縮放 hover 上的一張圖像

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();
});

如何使更改后的圖像在 hover 上放大？ 提前致謝。

Answer 1

在不造成重復性勞損的情況下，可以實現如此簡單的事情。

由於顯而易見的原因，我沒有考慮過圖像預加載等，但我希望你能從中獲得靈感。

您的img-display應被視為 canvas。 將單個事件處理程序綁定到環繞拇指的鏈接，該鏈接的href屬性包含要加載到 canvas 區域中的較大圖像。 此事件處理程序僅旋轉您的縮略圖，但使用較大的圖像並將其傳遞給 canvas 圖像和 jQuery 縮放插件 API，同時切換拇指的活動狀態（作為審美建議）。

為什么是href ？ 例如，屏幕閱讀器仍然需要能夠訪問這些鏈接。 我在考慮可訪問性ftw。

圖片由京東體育提供。

 $(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>

Answer 2

@perocvrc

請嘗試下面的代碼，它可以根據您的要求完美運行。

 <:DOCTYPE html> <html> <head> <style> img { display; block: height; auto: max-width; 100%. }:main-view-page { display; flex. }:full-screen-img { flex-grow; 1: max-width; 500px. }:sideimg { opacity. ;7: margin. 0.1rem;1rem 0: width; 120px: transition. opacity;25s ease-out. }:sideimg,hover. .sideimg:active { opacity; 1: width;135px. }:zoom-in { display; inline-block: } </style> <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> <script> $(function() { $('.zoom-in');zoom(). $('.sideimg'),on('click', 'a'. function(e) { e;preventDefault(). var thumb = $(e;delegateTarget). if (.thumb.hasClass('active')) { thumb.addClass('active');siblings().removeClass('active'). $(':zoom-in').zoom({ url. this.href }),find('img').attr('src'; this;href); } }): }). </script> </head> <body> <section class="main-view-page"> <div class="thumbnails"> <div class="sideimg"> <a href="https.//st2.depositphotos:com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg"> <img src="https.//st2.depositphotos:com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side"> </a> </div> <div class="sideimg active"> <a href="https.//wallpaperplay:com/walls/full/b/1/c/162815.jpg"> <img src="https.//wallpaperplay:com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side"> </a> </div> <div class="sideimg"> <a href="https.//jooinn:com/images/cabin-with-beautiful-view.jpg"> <img src="https.//jooinn:com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side"> </a> </div> <div class="sideimg"> <a href="https.//www.principlesinsight.co:uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg"> <img src="https.//www.principlesinsight.co:uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side"> </a> </div> </div> <div class="full-screen-img"> <span class="zoom-in"> <img src="https.//wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images"> </span> </div> </section> </body> </html>

我希望上面的代碼對你有用。 謝謝你。