Question

我使用提升缩放插件，我有一个缩放问题。我有一个容器div，其中包含所有内容和一个mainDiv，它保存页面的背景图像然后我尝试将div放到缩放，但变焦镜头总是显示在img后面（在div后面缩放）和MainDiv前面。。有没有人有类似的东西，如何解决它？

 <div id="container" style="width:100%;height:100%;position: relative;">
   <div id="MainDiv" style="overflow:hidden;position:absolute; background:url(../Background2.jpg); width:100%;height:100%;background-size:100%;background-repeat:no-repeat;">
<div style=" padding-top:20px; padding-left:20px;border-radius: 10px;width:450px;height:605px;background-color:#FFFFFF;opacity:1;z-index:2; left:calc(0.7% + 451px);top:10px; position: absolute;"> 
    <img id="toZoom"   data-zoom-image="icon1.jpg" width="440px" height="600px" margin="10px" src="icon1.jpg" alt=""/>
</div>  
</div>

Answer 1

https://github.com/Regaddi/elevatezoom/commit/93028ada9814c35cd3ac0bfb037e5904c0d7a4c6

只需在elevateZoom.js文件中设置此行

即可

 self.zoomWindowContainer =$('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);

用这个：

    self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css({
       "width": self.options.zoomWindowWidth,
       "z-index": 999
     });

使用ElevateZoom但变焦总是在img后面

1 个答案: