如何使用Elevatezoom悬停缩放图像而不使用大图像或小图像/单张图像

Question

我有一个他们只使用唱歌的项目。但图像质量很高。我想通过使用提升缩放或任何类似的图像来缩放此图像，只需使用这一个图像。下面是一个简单的缩放UI

<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

你可以尝试这种方法。

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