1

我的应用程序的一部分要求用户能够使用鼠标滚轮放大已经在较大容器元素中居中的图像。

我正在使用 jQueryUI 提供一个手动控制缩放的滑块。

使用鼠标滚轮缩放时，视口会调整，以便用户始终朝着鼠标光标缩放，在缩放功能方面提供与谷歌地图完全相同的行为。

此外，为了提供比使用 css 过渡更好的体验，我编写了一个基于动量的平滑滚动算法，以使缩放尽可能平滑。

除了一个例外，一切都完美无缺。

要复制问题，请在提供的 jsFiddle 上按照以下步骤操作：

  1. 将鼠标光标移动到图像的中心。
  2. 轻轻地将鼠标滚轮移动一格，以便平滑滚轮将您放大一点。
  3. 然后将鼠标光标移动到已经稍微放大的图像的另一个点
  4. 再次放大，这次只要你想要的
  5. 最后一直放大

您会看到缩小的图像现在放错了位置（因为尚未删除翻译）。

我想要的行为是让缩小的图像在比例设置回1.

如果您translate在 Firebug 中从图像中删除 css，您将看到图像返回到正确的位置。

因此，这可以通过一个简单的条件轻松实现，如下所示：

if(scale == 1){
    //remove transforms completely
}

然而，这样做会提供一种跳跃的体验，我希望图像在用户缩小时逐渐缩小到原始位置。

值得一提的是，如果你在不移动鼠标的情况下一直放大，你会发现当你缩小时一切都是正确的。这很简单，因为没有translate添加到元素转换中，只是 ascale和transform-origin。在我的代码中，translate只有当您使用鼠标中间缩放更改缩放位置时才会添加。

不幸的是，我似乎无法理解解决此问题的最佳方法。

这是一个工作的jsFiddle：

http://jsfiddle.net/3k332/15/

提前感谢您的帮助。

注意： 我很清楚我的小提琴中有一些冗余代码，而且它不是特别优雅，但这只是一个快速模拟，以帮助您理解问题。

4

0 回答 0