Question

所以，我正在将一个Flash小部件转换为HTML / CSS / JS，并且我在模拟面向中心的图像缩放效果方面遇到了问题。

所以，目前我的HTML结构如下：

<div id="outer">
  <img />
</div>

使用类似于以下内容的CSS：

#outer{
  width: 690px;
  height: 440px;
  position: relative;
}
#outer img{
  width: 690px;
  height: 440px;
  position: absolute;
  top: 0px;
  left: 0px;
}

然后在jQuery中，我这样做是为了创建缩放效果：

$image = $("#outer img");
scale = 1.16;
var w = parseInt($image.data("width")); //Set earlier to 690px
var h = parseInt($image.data("height")); //Set earlier to 440px
$image
  .animate({
    width: w*scale,
    height: h*scale,
    left: -(((w*scale) - w)/2),
    top: -(((h*scale) - h)/2)
  }, 5000, "linear");

jFiddle here

我发现这个特定的图像有点难以看到，但是在我的客户给我的图像中更容易看到（出于某种原因）。我所看到的是锯齿状/抖动/抖动的运动，我认为这可能是因为左/上/宽度/高度的十进制值不能很好地排列，以使其始终居中。

有没有更好的方法来解决这个问题，或者可能是一个能产生更好结果的缓和功能？

如果有什么我可以清理的，请告诉我。

谢谢！

编辑：我开始想是否可以编写一个缓和函数，每当左/上减少1时，宽度/高度会增加2，使其保持居中时间，但我不知道如何在jQuery中去做。我试着弄乱step函数的animate参数，但我无法弄清楚如何强制左/顶属性仅增加/减少整数值（整数）...

Answer 1

你总是可以试试CSS3动画，但是它有一个很大的问题，IE9不支持它......

然而，它非常流畅，请在此处查看结果：http://jsfiddle.net/YSJQu/

#outer img {
    (...)
    animation:zoom 5s;
    -moz-animation:zoom 5s; /* Firefox */
    -webkit-animation:zoom 5s; /* Safari and Chrome */
    -o-animation:zoom 5s; /* Opera */
}

@keyframes zoom {
    from { transform:scale(1) }
    to { transform:scale(1.2) }
}
@-moz-keyframes zoom {
    from { -moz-transform:scale(1) }
    to { -moz-transform:scale(1.2) }
}
@-webkit-keyframes zoom {
    from { -webkit-transform:scale(1) }
    to { -webkit-transform:scale(1.2) }
}
@-o-keyframes zoom {
    from { -o-transform:scale(1) }
    to { -o-transform:scale(1.2) }
}

Answer 2

动画一直是HTML中的难题。有些解决方案可以在桌面上顺利运行，但在移动设备中却不是那么顺畅，反之亦然，在浏览器中它们通常也会有不同的表现。

如果您来自Flash背景，我可以轻松推荐GSAP JS。它将比jQuery更好地执行很多。它基于javascript，并且具有几乎相同的JS和AS语法。

他们也提供了良好的 speed test。也许你想试试。

Answer 3

jsFiddle DEMO第二个例子

用于处理缩放要求的优秀jQuery库是.transit() plugin。

$(".thumbnail-1").hover(
    function () {
     $(this).stop(true,true).transition({ scale: 1.3 });
  }, 
    function () {
    $(this).stop(true,true).transition({ scale: 1.0 });
  }
);

中心缩放（宽度/高度/顶部/左侧）平滑

3 个答案: