單擊以在javascript中縮放圖像並調整大小

Question

我想做一些類似於以下鏈接的效果。

http://wallbase.cc/wallpaper/549871

最初根據用戶的屏幕分辨率渲染圖像，如果圖像大於用戶的屏幕分辨率，則在單擊時逐步調整圖像大小。

有人可以指導我如何去做。

我的jQuery不夠出色，因此不勝感激“ For Dummies”方法。

謝謝

Answer 1

很簡單 發生的一切是圖像上的單擊事件正在改變圖像的寬度和高度。 像這樣：

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

您也可以簡單地通過使用animate()更改css值來為縮放animate() 。

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

可能不完全是您想要的，但是我希望這段代碼可以幫助您了解您的想法:)