如何创建单击时变大的图像

Question

我有一个图片库，我想将其制作成当您单击单张图片时它会变大、全屏等。

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

Answer 1

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

如何创建单击时变大的图像

How to create an image that get bigger as you click it

html

image

gallery