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,
}

十个执行脚本中的zoomTop从200更改为0。

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

使用jQuery中的类选择器缩放帧位置

1 个答案: