点击后如何显示图片？

时间：2017-09-06 14:33:52

标签： javascript html css image

我有一些图片（现在它们是相同的，但稍后会有所不同）我希望我点击它时填满屏幕。

img_back是显示大图像的背景。 gallery_document是整个页面，因此可以显示img_back。

这两个函数是（应该）：

  1. 找到点击的图片。
  2. 在img_back上显示它。

    3. function clicked(img_src) {
  return img_src;
}
function imgDisplay() {
    $('.img_back').show();
    $('.gallery_document').hide();
    document.getElementByClass('image_large').src = clicked(img_src);
}
     body {
  border-top:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
}
.container-fluid {
  position: relative;
  background-color: #fff;
}
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
.img_back {
  background-color: #000000;
  display: none;
  opacity: 0.8;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.gallery_img {
    width: 90%;
    display: block;
  margin-left: auto;
    margin-right: auto;
  margin-bottom: 10%;
  margin-top: 10%;
}
.img_div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.gallery_img:hover {
  cursor:pointer;
}  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "row no-gutter img_back">
  <div class = "image_large_div">
    <img class = "image_large"/>
  </div>

  <div class = "gallery_document">
    <div class = "row no-gutter gallery_imgs">
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_1" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_2" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_3" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_4" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
    </div>

    <div class = "row no-gutter gallery_imgs">
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_5" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_6" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_7" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_8" onclick = "clicked(this.src) ; imgDisplay()" src = "https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-032.jpg"/>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

你可以创建一个获取图像id的javascript函数，然后onclick将该id的宽度和高度设置为70-80％或根据你的要求。

答案 1 :(得分：0)

你真的不需要JavaScript，但它会让它更稳定。由于我不懂JavaScript，我操纵HTML和CSS来模拟javascript函数。

在CSS中，如果你使用类似的东西：

    img {
        visability: hidden;
    }
    img.HOVER {
        img-size: 100%;
    }

我希望这有帮助！

（编辑：忽略这个PLZ ....有人提出更好的解决方案）

答案 2 :(得分：0)

我不完全确定这是你想要的功能，我希望它符合你的期望。我做了一些改变：

  • 用不同的猫图片取代单张图片，因为猫的一切情况都比较好（而且不同的图片更容易看到发生的事情）。
  • 将点击的处理程序移出HTML onclick属性并移入JS。我不需要在每个HTML元素上添加它，而只需要一个单击处理程序来实现相同的功能。
  • 稍微更改了HTML结构，将较大的预览图像移动到自己的容器中。我无法弄清楚你的解决方案应该如何运作。
  • 对于我使用background-image CSS属性的大预览图像，我发现当我希望图像填充元素同时保持其宽高比时，它更容易使用。
  • 用本机JS调用替换了jQuery调用，你没有做任何需要使用jQuery的东西。

我在代码中添加了一些注释来解释发生了什么，我希望这样清楚。

＆＃13;
＆＃13; 
/**
 * Handles the click event on the large preview image. Whenever it is clicked,
 * the element should be hidden again so the thumbnails become visible again.
 */
function onPreviewImageClicked(event) {
  // Hide the preview image by setting the "hidden" CSS class on it.
  previewImage.classList.add('hidden');
  // Show the thumbnails again by removing the "hidden" CSS class.
  thumbnailGallery.classList.remove('hidden');
}

/**
 * Handles all the clicks on the elements inside the thumbnail gallery.
 */
function onThumbnailClicked(event) {
  // Check if the clicked element has the "gallery_img" class, when it doesn't just
  // ignore the click.
  if (!event.target.classList.contains('gallery_img')) {
    return;
  }
  
  // Hide the thumbnails by setting the "hidden" class on the element.
  thumbnailGallery.classList.add('hidden');
  // Set the backgroundImage CSS property on the preview element to the same
  // src as the clicked image.
  previewImage.style.backgroundImage = `url(${event.target.src})`;
  // Make the preview image visible by removing the "hidden" class from it.
  previewImage.classList.remove('hidden');
}


const
  // Get the first, and in this case only, element with the class "image_preview".
  previewImage = document.querySelector('.image_preview'),
  thumbnailGallery = document.querySelector('.gallery_document');

// Attach an event handler to handle clicks on the element.
previewImage.addEventListener('click', onPreviewImageClicked);

// Attach an event handler to the thumbnail gallery.
thumbnailGallery.addEventListener('click', onThumbnailClicked);
＆＃13; 
body {
  border-top:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
}
.container-fluid {
  position: relative;
  background-color: #fff;
}
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
.img_back {
  background-color: #000000;
  opacity: 0.8;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.gallery_img {
    width: 90%;
    display: block;
  margin-left: auto;
    margin-right: auto;
  margin-bottom: 10%;
  margin-top: 10%;
}
.img_div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.gallery_img:hover {
  cursor:pointer;
}

.col-xs-3 {
  float: left;
  width: 25%;
}

.image_preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 4;
}

.hidden {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "row no-gutter img_back">

  <div class = "gallery_document">
    <div class = "row no-gutter gallery_imgs">
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_1"  src = "http://lorempixel.com/1280/720/cats/1"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_2"  src = "http://lorempixel.com/1280/720/cats/2"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_3"  src = "http://lorempixel.com/1280/720/cats/3"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_4"  src = "http://lorempixel.com/1280/720/cats/4"/>
      </div>
    </div>

    <div class = "row no-gutter gallery_imgs">
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_5"  src = "http://lorempixel.com/1280/720/cats/5"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_6"  src = "http://lorempixel.com/1280/720/cats/6"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_7"  src = "http://lorempixel.com/1280/720/cats/7"/>
      </div>
      <div class = "col-xs-3 img_div">
        <img class = "gallery_img" id = "img_8"  src = "http://lorempixel.com/1280/720/cats/8"/>
      </div>
    </div>
  </div>
</div>

<div class="image_preview hidden"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题