在給定時間間隔調整圖像大小的網絡技術

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

和其他技術是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); 
    } 
} 

如果確切時間對你很重要，你可能需要調整這使得它跟蹤的是當前動畫已經運行的時間量。