마우스 스크롤시 줌인 및 줌아웃 이미지

Question

HTML의 마우스 스크롤시 이미지를 확대 및 축소하고자합니다. ID이없는 img 태그가 여러 개 있습니다. 그렇다면 JavaScript 또는 Ajax를 사용하여 어떻게 할 수 있습니까?

Answer 1

이 질문에 대한 답변을 검색하는 답변 만 던지십시오.

먼저 마우스 스크롤을 감지하는 시스템을 찾아야합니다. 용기가 있다면 스스로 개발할 수 있습니다. 그렇지 않다면 꽤 좋은 라이브러리를 찾을 수 있습니다 (예 : MouseWheel with JQuery).

다음으로 확대/축소하는 두 가지 방법이 있습니다.

먼저 쉬운 방법의 조금 속이 수 있습니다. 줌을해야 할 때, 이미지의 높이와 너비를 결정할 요소로 곱하면됩니다. 당신 만이 선택을해야합니다, 당신은받을 것이다 스크롤 변수 (JQuery와) 각각에 대해

var height = $('#image').height(); 
var width = $('#image').width(); 

에 높이와 폭을합니다. 당신은 마우스 휠을 위 또는 아래로 이동하면 알 수 있습니다되면 , 당신은 당신의 이미지의 크기를 두 배로,이 방법이 (JQuery와) 같은 것을 할

height *= 2; 
width *= 2; 

해야합니다, 당신은 인상을해야합니다 확대 할 수 있습니다.

당신이 GMAP 객체에서하는 것처럼 확대하려면

이하 쉬운 방법, 당신은 그런 일을 할 수 있습니다.

var firstHeight = $('#image').height(); 

height *= 2; 
width *= 2; 

scalechange = (actualHeight/firstHeight) - 1; 
offsetX = -(coordX * scalechange); 
offsetY = -(coordY * scalechange); 

$("#image").css('top', offsetY + 'px'); 
$("#image").css('left', offsetX + 'px'); 

먼저 이미지의 첫 번째 높이가 있어야합니다. 다음으로 이미지의 크기를 두 배로 늘릴 것입니다 (확대/축소 효과). 다음 단계는 규모 변경을 계산하는 것입니다. 당신은 여러 가지 설명과 그것을 계산하는 많은 방법을 찾을 수있을 것이고, 나의 방법은 다른 것과 마찬가지로 좋을 것입니다. 제시된 두 가지 오프셋은 이미지가 채택 할 새로운 위치입니다 (단순 요소 계산, 가격에 x %를 만드는 것과 같습니다). 마지막 부분은 이미지의 새 값을 설정하는 것입니다.

결국 마우스 위치에서 이미지를 센터링하지 않고도 ou를 확대/축소 할 수 있습니다.

주의 : 위의 계산은 확대 할 때만 가능합니다. 당신은 축소를 얻기 위해 몇 가지 수학을해야 할 것입니다!

추가 정보?

또 다른 방법은 div에 이미지를 배치하는 것입니다. 당신의 사업부에

"overflow:hidden;" 

을 설정하여

<div id="imageContainer" style="overflow:hidden;"> 
    <img id="image" src="YourImage"> 
</div> 

, 당신의 이미지가 확대됩니다. div를 오버 플로우 할 모든 것이 숨겨집니다. 이 (JQuery와) 같은 이미지의 원래 크기로 사업부,

$("#imageContainer").css('height', $('#image').height()); 
$("#imageContainer").css('width', $('#image').width()); 

가 그런 이미지가 항상 같은 크기로 될 것입니다 표시해야하지만 당신의 줌이 효과적 일 것를 설정합니다. 이것을 drag'n'drop 메서드에 결합하면 GMap 오브젝트와 유사합니다 (확대, 확대 된 이미지를 moove ...)

누군가가 도움이되기를 바랍니다.