html小模块碰触会放大,javascript – 如何在点击所有img html标签时添加放大/缩小？...

在点击html文档(img标签)中的所有图像时添加放大/缩小的最简单方法是什么？

我正在用HTML编辑文档,并希望专注于本文档的内容.因此,我宁愿避免在img元素周围添加任何额外的div元素,至少在源文档中是这样.

是否有任何简单的javascript模块,我可以插入为此目的？

澄清.简单：

img:hover {

height: 400px;

}

几乎可以为我做这个工作但是：

>它破坏了布局

>使用悬停工作,我更喜欢点击工作.

根据Paulie_D的回答,这里是我最终提出的：

适用于Chrome& IE9.我试图将这个脚本添加到Paulie_D的答案,但我的编辑在那里被拒绝了 – 所以这里是：

img {

cursor: pointer;

transition: -webkit-transform 0.1s ease

}

img:focus {

-webkit-transform: scale(2);

-ms-transform: scale(2);

}

document.addEventListener('DOMContentLoaded', function(){

var imgs = document.querySelectorAll('img');

Array.prototype.forEach.call(imgs, function(el, i) {

if (el.tabIndex <= 0) el.tabIndex = 10000;

});

});