주어진 시간 간격으로 이미지의 크기를 조정하는 웹 기술

Question

주어진 시간 간격으로 이미지의 크기를 조정하는 기술이 있습니까?

내가하고 싶은 일은 이미지가있는 것입니다. 마우스가 넘기면 이미지의 크기가 커져 이미지가 커집니다. 내가 찾을 수있는 것은 이미지를 즉시 크기 조정하는 간단한 롤오버 스크립트입니다. 나는 약 1 초에 걸쳐 그것을하고 싶다.

그리고 필연적으로 시각적 경험을 지연시키고 파괴 할 수 없습니다. 가능한 경우 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

마우스가 움직 인 후에 다시. 상태를 저장하는 객체를 만드는 것이 아마도 최상의 솔루션 일뿐만 아니라 매우 적응력이 좋습니다 (다른 이미지, 다른 유형의 애니메이션). 정확한 타이밍이 중요 경우

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

, 당신은 현재 애니메이션이 실행 된 시간의 양을 추적 있도록이를 조정해야 할 수도 있습니다.