javascript - 特定の時間間隔で画像のサイズを変更する Web 手法

Question

特定の時間間隔で画像のサイズを変更する手法はありますか?

私がやりたいのは、画像を持っていることです。マウスがその上に置かれると、画像のサイズを変更して大きくする必要があります。私が見つけたのは、画像のサイズを即座に変更する単純なロールオーバー スクリプトだけです。1秒くらいでやりたい。

そして、視覚体験を遅らせて破壊することはできません。可能であれば、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

これはプレーンな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);
    }
}

正確なタイミングが重要な場合は、現在のアニメーションが実行されている時間を追跡するように調整する必要があります。

Answer 3

この方法でjQueryでそれを行うことができます。

var factor = 2;

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

その他のテクニックはこちら.