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

【问题标题】：How to hover zoom a image using Elevatezoom without using large or small image/ Single image如何使用 Elevatezoom 悬停缩放图像而不使用大图像或小图像/单张图像
【发布时间】：2016-10-20 04:41:03
【问题描述】：

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

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

【问题讨论】：

请问您为什么要避免使用 2 张图片？这是为了更好的性能还是仅仅为了布局/显示？
这是因为在我的项目中发生了很多上传，它只是保存为 HQ 的单个图像。所以如果我必须使用 2 个图像，我也必须进行一些深入的更改
代码在哪里？分享您的工作代码或您到目前为止所做的代码。正确的代码。不要只是来这里问没有代码的问题。

标签： jquery html css image

【解决方案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;
  }
}

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

【讨论】：

我无法理解没有 html 部分的代码
@Jeeva 你要看看这个吗？
耶！！我还没试过这个。但我想用 elevatezoom 来做。无论如何谢谢
@Jeeva 不用担心 :) 但是..“使用提升缩放或任何类似”