如何创建单击时变大的图像
如何创建单击时变大的图像
提问于 2018-07-02 04:06:43
我有一个图片库，我想让它当你点击一个单独的图片时，它会变得更大，全屏等等。
<div class="container">
<div class="row">
<img class="col-xs-3 paddingtop1" src="img.jpg">
<img class="col-xs-3 paddingtop1" src="img3.jpeg">
<img class="col-xs-3 paddingtop1" src="img4.jpg">
<img class="col-xs-3 paddingtop1" src="img5.jpg">
<img class="col-xs-3 paddingtop" src="img7.jpg">
<img class="col-xs-3 paddingtop" src="img8.jpg">
<img class="col-xs-3 paddingtop" src="img9.jpg">
<img class="col-xs-3 paddingtop" src="img10.jpg">
<img class="col-xs-3 paddingtop" src="img11.jpg">
<img class="col-xs-3 paddingtop" src="img2.jpg">
<img class="col-xs-3 paddingtop" src="img6.jpg">
<img class="col-xs-3 paddingtop" src="smilecup.jpg">
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-02 04:17:37
在每个div中添加in，并在JS中进行编辑：
function increase(id) {
element = document.getElementById(id);
width = element.clientWidth;
element.style.width = String(width+10)+"px"
}<div class="container">
<div class="row">
<img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg">
<img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg">
<img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg">
<img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg">
<img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg">
<img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg">
<img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg">
<img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg">
<img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg">
<img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg">
<img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg">
<img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg">
</div>
</div>
而对于全屏：
function increase(id) {
element = document.getElementById(id);
element.style.width = window.innerWidth+"px"
}<div class="container">
<div class="row">
<img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg">
<img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg">
<img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg">
<img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg">
<img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg">
<img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg">
<img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg">
<img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg">
<img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg">
<img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg">
<img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg">
<img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51126643
复制相关文章
相似问题