1

因此，我将 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在这里

我发现的这张特定图片有点难以看清，但（出于某种原因）在我的客户给我的图片中更容易看到。我看到的是锯齿状/摇晃/抖动的运动，我认为这可能是因为左/上/宽/高的十进制值排列得不够好，无法始终保持居中。

有没有更好的方法来解决这个问题，或者可能有一个可以产生更好结果的缓动函数？

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

谢谢！

编辑：我已经开始考虑是否可以编写一个缓动函数，每次左/上减少 1 时将宽度/高度增加 2 以使其始终保持居中，但我不确定如何在 jQuery 中解决这个问题。我试着弄乱函数的step参数，animate但我不知道如何强制左/上属性仅增加/减少整数值（整数）......

4

3 回答 3

6

你总是可以尝试 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) }
}
于 2013-01-12T01:43:25.733 回答
2

动画一直是 HTML 中的难点。一些解决方案在台式机上运行顺畅，但在移动设备上运行不那么顺畅，反之亦然，它们在不同浏览器中的表现通常也不同。

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

它们还提供了很好的速度测试。也许你想试试。

于 2013-01-12T00:56:59.527 回答
1

jsFiddle DEMO第二个例子

处理缩放要求的一个很棒的 jQuery 库是.transit() 插件。

$(".thumbnail-1").hover(
    function () {
     $(this).stop(true,true).transition({ scale: 1.3 });
  }, 
    function () {
    $(this).stop(true,true).transition({ scale: 1.0 });
  }
);
于 2013-01-12T02:06:20.577 回答