-1

我正在编写一个简单的 jQuery 页面，其中显示了两个图像。单击其中一个会触发 CSS3 转换，这应该会结束对图像的缩放。

该页面必须在 iPad 上查看，因此我必须使用 CSS3 3D Transformation 才能使用硬件加速并保持过渡流畅。

我在这里写了一个简单的演示脚本：http: //jsfiddle.net/andrearota/KAdmV/4/

例如，这是我使用比例因子放大的方式。请注意，我使用 z 属性试图让 div 超过封闭的：

Carousel.prototype.openLeft = function (callback) {
    var that = this;
    if (this.leftStatus != 'open') {
      this.left.transition({
          z: '+=100',
          scale: 2 
        }, function () {
          that.leftStatus = 'open';
          if (callback) callback();
        });
    } else {
        if (callback) callback();
    }
};

如您所见，如果单击左侧图像，则图像会放大并越过右侧图像。当您单击右侧时，反之亦然。但是，如果您再次单击左侧，您会看到图像堆叠问题，因为左侧缩放的图像位于最小化的右侧图像下方。

有什么提示吗？

4

1 回答 1

1

看起来您可以删除第二个图像上的变换，它会回到第一个图像后面。因此，换句话说，在单击图像时，我可能会先删除所有出现的变换属性，然后再将其应用于单击的图像。

Or you could also set both images to position:relative and then on click set the z-index to something like 5 and set all other images to something below it such as 3. But again, you'll need to clear these inline styles so that when another image is clicked there are remnants from before that give you un-clear results.

于 2013-04-08T16:14:40.023 回答