큰 이미지 또는 작은 이미지를 사용하지 않고 Elevatezoom을 사용하여 이미지를 확대/축소하는 방법/단일 이미지

Question

나는 노래 만 사용하는 프로젝트가 있습니다. 그러나 이미지는 고품질입니다. 이 이미지를 사용하여이 이미지를 높이 올리기 또는 다른 비슷한 방법으로 확대하고 싶습니다. 다음은이 방법을 시도 할 수 있습니다

<script src='jquery-1.8.3.min.js'></script> 
    <script src='jquery.elevatezoom.js'></script> 
<script> 
    $("#zoom_01").elevateZoom({ 
    zoomType    : "lens", 
    lensShape : "round", 
    lensSize : 200 
}); 

Answer 1

줌의 간단한 UI입니다.

되는 HTML

<div class="thumb-holder"> 
    <img class="thumbnail" src="https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg"> 
</div> 

CSS의

.thumb-holder{ 
    border:4px solid #ff07ee; 
    padding:0; 
    width:400px; 
    height:auto; 
    position:relative; 
    margin:15% auto; 
    display: block; 
    overflow: hidden; 
    .thumbnail{ 
    float:left; 
    width:100%; 
    height:auto; 
    } 
} 
.thumb-zoom{ 
    position: absolute; 
    background-repeat:no-repeat; 
    width:100px; 
    height:100px; 
    border-radius:100%; 
    box-shadow:inset 0 0 10px rgba(0,0,0,0.5); 
    border:4px solid #141414; 
    top:0; 
    overflow: hidden; 
    cursor:none; 
    #zoom-img{ 
    width:500px; 
    height:auto; 
    position: absolute; 
    } 
} 

JS

$(".thumb-holder").append('<div class="thumb-zoom"></div>') 

$(".thumb-holder").mousemove(function(event) { 

    var offset = $(this).offset(); 
    var zoomX = event.pageX - offset.left - 50 ; 
    var zoomY = event.pageY - offset.top - 50; 



    $('.thumb-zoom').css({ 
    'left' :zoomX, 
    'top': zoomY, 
    }) 

    var position = $(".thumb-zoom").position(); 
    var image = $(".thumbnail").attr('src'); 

    $('.thumb-zoom').html('<img id="zoom-img" src="'+ image +'" >'); 

    $("#zoom-img").css({ 
     'left' : -zoomX - 50 , 
     'top': -zoomY - 50, 
    }) 

}); 

---

[결과

---

데모

Codepen : 당신이이 개 이미지를 사용하지 않도록하려는 이유ElevateZoom Lens Effect on hover using one image with JS and CSS