Question

我的html页面中有一张图片。

<img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" alt="" width="200" height="150">

如何通过点击它在同一页面中放大显示？。

Answer 1

您可以使用纯css3 transform: scale();

来完成此操作

显示EXAMPLE

Answer 2

理想情况下，<img>会有id或类（特别是如果有多个）。最简单的方法可能是添加一个类，尽管你也可以改变width属性或样式属性。

/* CSS */
.enlarged {
    width: 400px;
    height: 300px;
}

// JavaScript
Array.prototype.forEach.call(document.querySelector("img"), function (elem) {
    elem.addEventListener("click", function () {
        elem.classList.toggle("enlarged");
    });
});

对于上述某些内容，您需要至少IE10，例如forEach和classList，除非您自己定义方法，如文档

Answer 3

我认为这会对你有帮助

<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 */

}

您可以根据您的要求转换比例。

Answer 4

您可以使用jQuery来使用以下内容。

$(function ()
{
    $('img').on('click', function ()
    {
        $(this).width(1000);
    });
});

Answer 5

您可以使用jQuery的Click（）和Attr（）函数

HTML：添加一个ID，例如thumbnailImage。

jQuery的：

$("#thumbnailImage").click(function() {
   $(this).attr('width', '400');
    $(this).attr('height', '300');
});

看我的jsFiddle： http://jsfiddle.net/VyYkE/1/

Answer 6

为图片提供ID

$(function ()
{
    $('#imageid').on('click', function ()
    {
        $(this).width(1000);
    });
});

如何通过单击来扩展HTML中的图像

6 个答案: