javascript - 如何使用 jqzoom 放大一组元素

Question

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

代码@jsfiddle:http://jsfiddle.net/Fam43/23/

示例 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函数:

$('.zoom').jqzoom({
   zoomType: 'innerzoom'
});

Answer 1

在考虑了这种情况之后，我想到了以下几点:

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

我的例子: http://jsfiddle.net/7FQHt/

集成 OP 的示例: http://jsfiddle.net/Fam43/24/

您甚至可以将链接限制为仅一个项目:http://jsfiddle.net/Fam43/25/ 或 http://jsfiddle.net/Fam43/26/

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