javascript - 在给定时间间隔内调整图像大小的 Web 技术

Question

有没有一种技术可以在给定的时间间隔内调整图像的大小？

我想要做的是有一个图像，当鼠标滑过它时，它应该调整图像的大小使其变大。我能找到的只是简单的翻转脚本，可以立即调整图像大小。我想在大约一秒钟的时间内完成。

而且它必须不能滞后和破坏视觉体验。如果可能的话，我正在寻找一种使用 javascript、jQuery 或 HTML5 的方法；其他建议表示赞赏，但没有闪光。

Answer 1

使用 CSS3 过渡非常简单：

.myImg
{
    width: 200px;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
}
.myImg:hover
{
    width: 300px;
}

演示： jsfiddle.net/yyDd4

Answer 2

您可以通过这种方式在 jQuery 中执行此操作。

var factor = 2;

$('#foo').mouseover(function() {
    $(this).animate({
        top: '-=' + $(this).height() / factor,
        left: '-=' + $(this).width() / factor,
        width: $(this).width() * factor
    });
});

其他技术在这里。

Answer 3

您可以在纯 javascript 中执行此操作，尽管动画总是非常复杂，尤其是如果您希望图像在鼠标移开后缩小。制作一个对象来存储状态可能是最好的解决方案，而且适应性也很强（其他图像，其他类型的动画）。

http://jsfiddle.net/VceD9/6/

new GrowingImage('myImage', 2, 1000);

function GrowingImage(id, factor, duration) {
    var el = document.getElementById(id),
        originalWidth = el.offsetWidth,
        originalHeight = el.offsetHeight,
        timer, 
        stage = 0,
        frameRate = 17,
        maxStage = duration / frameRate;
    el.onmouseover = function () {
        animate(1);
    };
    el.onmouseout = function () {
        animate(-1);
    };
    function animate(direction) {
        clearInterval(timer);
        timer = setInterval(function() {
            stage += direction;
            if (stage <= 0) {
                stage = 0;
                clearInterval(timer);
            } else if (stage >= maxStage) {
                stage = maxStage;
                clearInterval(timer);
            }
            var scale = 1 + (factor - 1) * stage / maxStage;
            el.style.width = originalWidth * scale + 'px';
            el.style.height = originalHeight * scale + 'px';
        }, frameRate);
    }
}

如果确切的时间对您很重要，您可能需要调整它，以便跟踪当前动画运行的时间量。