如何创建在单击时变得更大的图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (35)

我有一个图像库,我想这样做,当你点击一个单独的图片,它变得更大,全屏等。

<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>
提问于
用户回答回答于

将ID添加到每个div并在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>

扫码关注云+社区

领取腾讯云代金券