Question

我试图创建一个网站设计，其中我有一个3乘3的图像网格，每当我将鼠标放在特定图像上时，该图像的大小会比其他图像略大。这种重新调整的大小不应该立即发生;它将是一种流体动画，其中图像的高度和宽度每帧增加x个像素（同时保持纵横比），直到达到所需的大小。

我很确定这可以在JQuery中完成，但我似乎无法找到它的命令。我能找到的最接近的是JQuery scale effect，但是它会将图像缩小为空，而不是将其大小动态增加到规定的最大值。

现在假设我得到了正确的实现，当鼠标悬停在图像上时，如何让脚本单独调整图像大小？到目前为止，我只能一次调整所有图像的大小，如果我将9个图像中的每个图像分别设置为id，我不确定如何通过脚本修复它。

Answer 1

CSS转换是您所需要的。您可以调整更改的时间并使用它们为任何CSS属性设置动画。

当鼠标悬停在图像上时，以下代码将图像以1秒1/5的比例扩展。

img {
    width: 200px;
    height: 150px;
    transition: width 1s;
    -webkit-transition: width 1s;
    transition: height 1s;
    -webkit-transition: height 1s;
}
img:hover{
    width: 240px;
    height: 180px;
}

这是一个粗略的fiddle，可以帮助您入门。

如何流畅/动态地调整图像大小

1 个答案: