javascript - 在 jQuery 中使用类选择器的图像缩放框架位置

Question

请看这个fiddle

我从这个 site 得到了图像放大插件 Leroy Zoom | .我无法让它在同一页面上处理多个图像。缩放框固定在某个位置，不会在悬停时动态移动到任何图像旁边。有没有办法使缩放框的位置与悬停图像相对应？

HTML:

<div class="area"><a href="#" class="demo-trigger" data-medium-url="jpg" data-large-url="jpg">
    <img src="jpg" />
    </a>
</div>

<div class="area"><a href="#" class="demo-trigger" data-medium-url="jpg" data-large-url="jpg">
    <img src="jpg" />
    </a>
</div>

执行脚本:

     $(document).ready(function() {

       $(".demo-trigger").each(function(){
            var area = $(this).closest('.area')
            $(this).leroyZoom({
            zoomTop: 200, // Zoom frame distance from top in pixels
            zoomLeft: 160, // Zoom frame distance from left in pixels
            parent: area    
           });
       });
   });

Answer 1

添加到CSS

.area {
    position: relative,
}

10 在您的执行脚本中将 zoomTop 从 200 更改为 0。

这是工作版本: http://jsfiddle.net/2dWWx/13/