Question

我想在下面的链接中做类似于效果的事情。

最初渲染图像取决于用户的屏幕分辨率，如果图像大于用户的屏幕分辨率，则单击图像调整大小的步骤。

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

我在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值来为此缩放设置动画。

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

可能不完全是你想要的但是我希望这段代码可以帮助你理解你的想法：）

单击缩放并在javascript中调整图像大小

2 个答案: