Question

我只是寻找最简单的方式让我的图像弹出/放大等（如果这是正确的术语），但弹出并占用现有屏幕或设备的空间，如灯箱。基本上我只是创建一个非常简单的图库。点击后，图像会弹出。

我已经看过几个教程和模板，但我不是一个真正的超级编码器，我正在尽我所能自己创建。任何帮助将不胜感激。我愿意使用纯CSS或包含jquery。如果有人能指出我正确的方向，那就太好了。

我的代码在这里（我似乎无法粘贴CSS，抱歉）：

<html>
<head></head>
  <body>
    <div class="container">
         <ul class="picture">
             <li><img src="http://lorempixel.com/200/200/"><li>
             <li><img src="http://lorempixel.com/200/200/"><li>
         </ul>
    </div>
    </div>
  </body>
</html>

.container {
  height: 600px;
  width: 600px;
  background-color: lightgray;
  margin: 0 auto;
}

.picture {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: block;
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
}

谢谢

Answer 1

这是一个你可以摆弄的简单小技巧：

img:active { position:fixed; top: 0; left: 0; z-index: 1; height: 100%; width:auto }

添加到CSS并单击图像。它将增长到100％height并相应地调整width。 z-index: 1将其移到页面其余部分的顶部。

也可以使用img:hover。轻松开始，学习并扩展您的需求。

使用img:hover { transform: scale(1.25 }时，只需将ppl悬停在图像上即可吸引注意力。

Answer 2

试试我为您创建的这个codepen： http://codepen.io/anon/pen/meYoWy

在您的＆＃34;容器上方＃34; class，我添加了一个带有灯箱类的div和另一个用于图像容器的div。

<div class="lightbox">
  <div class="image"></div>
</div>

我创建了一个灯箱css类来调暗背景，点击后，它会关闭缩放的图像。

.lightbox {
  background: rgba(0,0,0,0.75);
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  display:none;
  z-index: 9999;
}
.lightbox .image {
  width:80%;
  height:80%;
  margin: 0 auto;
  position:relative;
  top: 5%;
  background-image: url('');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

我使用JQuery来操作dom元素并使用fadein和fadeout动画并将事件绑定到图像。

$('ul.picture li').on('click', function() {
  var img = $(this).find('img'); //get the image element inside the li
  var imgsrc = img.attr('src'); //get the source url of the image
  $('.lightbox > .image').css('background-image','url("'+imgsrc+'")') //use the src of the image to use as the background of the .image div inside lightbox
  $('.lightbox').fadeIn('fast'); //show the lightbox
})

$('.lightbox').on('click', function() {
  $(this).fadeOut('fast'); //close the lightbox when clicked
})

$('.lightbox > .image').on('click', function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
  /*
  this code was added to prevent the image from closing 
  when the image is clicked instead of the lightbox
  */
})

最简单的图像弹出方式，如图库集合，灯箱

2 个答案: