在点击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;
});
});