通过使用 jQuery 单击它来放大图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8920534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enlarge image by clicking on it using jQuery
提问by Mosaic
How do I enlarge an image by clicking on it using jQuery. I'm pretty new to this and feel like I'm going in circles, please help. Thanks!
如何通过使用 jQuery 单击它来放大图像。我对此很陌生，感觉自己在兜圈子，请帮忙。谢谢！
Here's the HTML portion:
这是 HTML 部分：
<div class="box">
<img id="image1" src="css/images/smallknife.png">
<p>.00</p>
</div>
<div id="dialog" style="display: none;">
<img src="css/images/smallknife.png">
</div>
And this is the jQuery portion
这是 jQuery 部分
$('#image1').click(function(){
$("#dialog").dialog();
});
回答by HandiworkNYC.com
Might you be looking for a lightbox plugin like fancybox?
您可能正在寻找像fancybox这样的灯箱插件吗？
回答by Matt Ball
Barebones code:
准系统代码：
$(function ()
{
$('#my-image').on('click', function ()
{
$(this).width(1000);
});
});
回答by JacobG182
This is the method I would use at it's most simple level to enlarge an image with a smooth transition:
这是我在最简单的级别上使用的方法来放大具有平滑过渡的图像：
$(document).ready(function(){
$("img").click(function(){
$("img").animate({height: "300px"});
});
});
回答by Trevor
Here is some basic use.
这里有一些基本的用法。
var $img = $('img'); // finds all image tags
$img.click(function resize(e) { // bind click event to all images
$img.css({ // resize the image
height: '300px',
width: '300px'
});
});
if you are looking to bind the click event to one specific image, give the image and idand cache like this
如果您希望将单击事件绑定到一个特定图像，请id像这样提供图像和缓存
var $img = $('#imageID');
var $img = $('#imageID');
回答by coban
after searching and searching i found myself a way to do without using external JS source and no problems with licensing. positioning absolute and setting width and height to 100%, play with ocupacy of a div and there it is. I needed to create extra table to be able to center the image, did not work on div. and don't forget z-index to place the div and table above all other elements. cheers...
在搜索和搜索之后，我发现自己无需使用外部 JS 源代码，并且没有许可问题。定位绝对并将宽度和高度设置为 100%，玩一个 div 的占用，它就在那里。我需要创建额外的表格才能使图像居中，但不适用于 div。并且不要忘记 z-index 将 div 和 table 放置在所有其他元素之上。干杯...
function enlargeimage(x)
{
var a = document.getElementById('_enlargeimg');
a.style.height = x + '%';
a.style.width = x + '%';
x++;
if (x < 90)
{ setTimeout("enlargeimage(\"" + x + "\")", 5);}
}
function reduceimage(x)
{
var a = document.getElementById('_enlargeimg');
a.style.height = x + '%';
a.style.width = x + '%';
x--;
if (x > 0)
{ setTimeout("reduceimage(\"" + x + "\")", 5);}
else
{
b = document.getElementById('_enlargediv');
c = document.getElementById('_enlargetable');
b.parentNode.removeChild(b);
c.parentNode.removeChild(c);
document.body.style.overflow = 'auto';
}
}
function createelements(imgfile)
{
var divbackground = document.createElement('div');
divbackground.setAttribute('id', '_enlargediv');
divbackground.style.width = '100%';
divbackground.style.height = '100%';
divbackground.style.position= 'absolute';
divbackground.style.background= '#000';
divbackground.style.left= '0';
divbackground.style.top= '0';
divbackground.style.opacity= 0.7;
divbackground.style.zIndex= '1';
document.body.appendChild(divbackground);
var tblbackground = document.createElement('table');
tblbackground.setAttribute('id', '_enlargetable')
tblbackground.style.width = '100%';
tblbackground.style.height = '100%';
tblbackground.style.position= 'absolute';
tblbackground.style.left= '0';
tblbackground.style.top= '0';
tblbackground.style.zIndex= '2';
tblbackground.style.textAlign = 'center';
tblbackground.style.verticalAlign = 'middle';
tblbackground.setAttribute('onClick', 'reduceimage(90)');
var tr = tblbackground.insertRow();
var td = tr.insertCell();
var nimg = document.createElement('img');
nimg.setAttribute('src', imgfile);
nimg.setAttribute('id', '_enlargeimg');
nimg.style.width='0px';
nimg.style.height='0px'
nimg.style.borderRadius = '5px';
td.appendChild(nimg);
document.body.appendChild(tblbackground);
document.body.style.overflow = 'hidden';
enlargeimage(0);
}
回答by Paul Zahra
Here's a nice code snippet that will toggle the image size between 120px wide and 400px wide, with a nice slow animation onclick.
这是一个很好的代码片段，它将在 120px 宽和 400px 宽之间切换图像大小，并带有一个很好的慢动画 onclick。
$("img").toggle(function()
{$(this).animate({width: "400px"}, 'slow');},
function()
{$(this).animate({width: "120px"}, 'slow');
});
回答by Troglo
I opted for the simplemodal jquery plugin. It included all what I need and is super simple to use.
我选择了 simplemodal jquery 插件。它包括了我需要的所有东西，而且使用起来非常简单。
回答by RobertH
I know this post is kind of old, but in case anyone else stumbles across it, this is how to make the image enlarge in a jquery dialog.
我知道这篇文章有点旧，但以防其他人偶然发现它，这是在 jquery 对话框中放大图像的方法。
$('img').on('click', function (){
$('body').append('<div id="dialog" title="Image"><img src="' + $(this).attr('src') + '" width="300" /></div>');
$('#dialog').dialog();
});
Make sure you have the jquery-ui.css available otherwise it will look funny.
确保你有 jquery-ui.css 可用，否则它看起来会很有趣。
