Question

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

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

作为必须，它不能滞后并破坏视觉体验。我正在寻找javascript，jQuery或HTML5的方法，如果可能的话;其他建议赞赏但没有闪光。

Answer 1

使用CSS3 Transitions非常容易：

.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
    });
});

其他技术是here。

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);
    }
}

如果完全时间对您很重要，您可能需要对其进行调整，以便跟踪当前动画运行的时间。

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

3 个答案: