jquery - 如何在不使用大图像或小图像/单图像的情况下使用 Elevatezoom 悬停缩放图像

Question

我有一个元素，他们只使用唱歌。但是图像质量很高。我想通过使用这张图片来使用提升缩放或任何类似的方式来缩放这张图片。下面是一个简单的 zoom 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, 
     })

});

---

结果

---

演示

代码笔: ElevateZoom Lens Effect on hover using one image with JS and CSS