jQuery 如何通过单击在 HTML 中展开图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19104018/
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
How to expand an image in HTML by clicking on it
提问by Newbee
I have an image in my html page.
我的 html 页面中有一个图像。
<img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" alt="" width="200" height="150">
How can I show it enlarged in the same page by clicking on it?.
如何通过单击在同一页面中放大显示它？。
采纳答案by Patwardhan Shantanu
I think this will help you
我想这会帮助你
<img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" class="img" alt="" width="200" height="150">
.img:hover{
color: #424242;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
opacity: 1;
transform: scale(1.15);
-ms-transform: scale(1.15); /* IE 9 */
-webkit-transform: scale(1.15); /* Safari and Chrome */
}
You can transform Scale as per your requirement.
您可以根据需要转换比例。
回答by Black Sheep
回答by Explosion Pills
Ideally the <img>would have an idor class (especially if there are multiple of them). The simplest way would probably be to add a class although you could also change the width property or style property.
理想情况下<img>会有一个id或类（特别是如果有多个）。最简单的方法可能是添加一个类，尽管您也可以更改宽度属性或样式属性。
/* CSS */
.enlarged {
width: 400px;
height: 300px;
}
// JavaScript
Array.prototype.forEach.call(document.querySelector("img"), function (elem) {
elem.addEventListener("click", function () {
elem.classList.toggle("enlarged");
});
});
You will require at least IE10 for some of the above like forEachand classListunless you define the methods yourself like the documentation has
回答by blackpanther
You could use the following using jQuery.
您可以使用 jQuery 使用以下内容。
$(function ()
{
$('img').on('click', function ()
{
$(this).width(1000);
});
});
回答by Laura Ritchey
You can use jQuery's Click() and Attr() functions
您可以使用 jQuery 的 Click() 和 Attr() 函数
HTML: Add an ID such as thumbnailImage.
HTML：添加一个ID，例如thumbnailImage。
jQuery:
jQuery：
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
});
See my jsFiddle: http://jsfiddle.net/VyYkE/1/
看我的 jsFiddle：http: //jsfiddle.net/VyYkE/1/
回答by user2092317
give image an id
给图像一个 id
$(function ()
{
$('#imageid').on('click', function ()
{
$(this).width(1000);
});
});
