9

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

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

如何通过单击将其放大显示在同一页面中？

4

6 回答 6

8

我想这会对你有所帮助

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

}

您可以根据需要转换 Scale。

于 2016-04-14T07:21:25.480 回答
6

你可以用纯css3做到这一点transform: scale();

显示示例

于 2013-09-30T21:24:00.020 回答
6

理想情况下，<img>应该有一个idor 类（特别是如果有多个）。最简单的方法可能是添加一个类，尽管您也可以更改宽度属性或样式属性。

/* 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您像文档中那样自己定义方法

于 2013-09-30T21:25:34.130 回答
4

您可以使用 jQuery 的 Click() 和 Attr() 函数

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

jQuery：

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

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

于 2013-09-30T21:22:07.413 回答
3

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

$(function ()
{
    $('img').on('click', function ()
    {
        $(this).width(1000);
    });
});
于 2013-09-30T21:18:39.953 回答
1

给图片一个id

$(function ()
{
    $('#imageid').on('click', function ()
    {
        $(this).width(1000);
    });
});
于 2013-09-30T21:18:31.760 回答