자바 스크립트에서 이미지를 확대하고 크기를 조정하려면 클릭하십시오.

Question

아래 링크의 효과와 비슷한 것을하고 싶습니다. 이미지는 처음 사용자에 따라 렌더링

http://wallbase.cc/wallpaper/549871

해상도 화면 및 화상 단계 크기 변경에 화상을 클릭시, 상기 사용자의 스크린 해상도보다 큰 경우.

누군가가 나를 어떻게 안내 할 수 있습니까?

나는 jQuery에서 그렇게 좋지 않아 "For Dummies"접근 방식을 고맙게 생각한다.

감사합니다.

Answer 1

매우 간단합니다. 일어나는 모든 일은 이미지의 클릭 이벤트가 이미지의 너비와 높이를 변경하는 것입니다. 이런 식으로 뭔가 : 당신은 또한 단순히 CSS 값을 변경할 animate()를 사용하여이 확대 애니메이션을 할 수

var img = $('img'); 
var zoomWidthIncrement = img.width() * 1/3; 
var zoomHeightIncrement = img.height() * 1/3; 

img.click(function(){ 
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement}); 
}); 

.

Answer 2

나는 이것을 프로젝트에도 사용했다. 당신은 이것을 시도 할 수있다 : 이 방법을위한 그림의 2 개의 버전, 정상적인 것 및 확대 한 것을 필요로한다.

$('#myDiv').click(function() { 
    if ($('#myDiv').length != 0) { return; } 
    $('body').prepend('<div id="myDiv" class="mapTileOverlay"></div>'); 
    $('#myDiv').html('<div class="topOverlay"></div><div class=" overlayLarge"><div class="jqContentContainer"><div class="closeArea"><img src="<%=Utility.RawApplicationPath%>/static/images/game/office/closeButton.png"></div><img class="illustration" src="myImgBigVersion" alt="Text illustration"></div></div><div class="bottomOverlay"></div>'); //<form class="formPMPStart" method="post" action="/game"><input type="submit" id="btnStart" class="gameContinue" value="Continue" /></form> 
    $('#jqmdeskComputer').jqm({ modal: false, onShow: myOpen, onHide: myClose }).jqmAddClose($('div.closeArea')).jqmShow(); 
}); 

은 아마 정확히 당신이 원하는 것을하지만 난 당신이 당신이 :) 마음에