Javascript 如何使用jqzoom放大一组元素

我使用Jqzoom为给定的图像提供缩放。这些图像并排放置，每个图像的大小相同。我想找到一种方法，在同一时间对所有图像进行相同的缩放

代码@jsfiddle:

IMG样本：

示例HTML代码：

  <div>
    <!-- Omitted stuff here -->
    <a href="img1_big.png" class="zoom">
      <img src="img1.png" width="100%" />
    </a>
  </div>

  <div>      
    <!-- Omitted stuff here -->
    <a href="img2_big.png" class="zoom">
      <img src="img2.png" width="100%" />
    </a>
  </div>

  <div>
    <!-- Omitted stuff here -->
    <a href="img3_big.png" class="zoom">
        <img src="img3.png" width="100%" />
    </a>
  </div>

---

在考虑了一下情况后，我提出了以下建议：

在jqZoom 2.3的第一部分中，有一个

$.extend（obj.{

，其中一个成员是

init:

，在该函数中，将设置鼠标事件的部分替换为：

在

mouseenter mouseover

事件结束时：

$(".zoomPad", el).bind('mouseenter mouseover', function(event) {
    // *snip
    if (settings.linked && event.srcElement === this) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseover');
    }
});

更改mouseleave功能，如下所示：

$(".zoomPad", el).bind('mouseleave', function(event, notSource) {
    obj.deactivate();
    if (settings.linked && !notSource) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseleave', [true]);
    }
});

鼠标移动功能需要更改参数，并添加功能开头和结尾的代码：

$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
    if (thisx && thisy) {
        e = $.extend(e, {
            pageX: (thisx + this.offsetLeft),
            pageY: (thisy + this.offsetTop)
        });
    }

    // *snip*

    if (settings.linked && !(thisx && thisy)) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
    }
});

我的例子是：

综合OP的示例：

您甚至可以将链接限制为一个项目：或

---

这对你来说可能没有100%的意义，没关系，问我一个问题就行了。有些事情在我的脑海里是有意义的，而不是在你的脑海里。

试着把它发布到一个你尝试过什么？我想你必须改变jqZoom，因为这不是这个插件的正常行为。非常感谢你，这正是我需要的：D@marcosRoriz事实上是这样的我也需要……不完全是，但我自己也需要jqzoom做一些专业化的事情。因此，这帮助我理解了它的本质。谢谢！；）

$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
    if (thisx && thisy) {
        e = $.extend(e, {
            pageX: (thisx + this.offsetLeft),
            pageY: (thisy + this.offsetTop)
        });
    }

    // *snip*

    if (settings.linked && !(thisx && thisy)) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
    }
});