Question

我正在尝试为网站制作一个小相册。左侧有一些小照片缩略图。如果单击其中一个，它应显示在右侧的完全结果中。我认为你可以通过重叠所有图片并将它们放在display: none中来解决这个问题。每次单击缩略图图像时，会触发一个小的javascript函数，将特定图片的css更改为display: block以使其可见。这是我现有的代码，包括。的jsfiddle：

.images{
  float: left;
  margin-right: 10px;
  border: 1px solid silver; 
  width: 100px; 
  height: 100px; 
  overflow: hidden; 
  margin-bottom: 50px;
  border: 4px solid transparent;}

.images img{
  height: 100px;
  width: auto;}
  
.images:hover, .images:visited, .images:active {
  border: 4px solid #009EE0;}
  
.table {
  width: 60%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;}

<div class="table">
  <div class="images">
    <img src="http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
  <div class="images">
    <img src="https://www.drphillipscenter.org/resources/images/default.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
</div>
<p>When clicked, I want the Picture to appear right here but sized bigger.</p>

https://jsfiddle.net/zar2u0v1/1/

隐藏所有图像的更好建议会很好，因为性能不足会成为一个问题。在此先感谢，我希望你能帮助我！

Answer 1

这可能会让你走上正确的道路。

tabindex使用<div>使其可点击。
使用:focus CSS状态设置焦点<div>。
最后焦点时position图像。

关于这一点的好处是，一切都是使用CSS完成的，不需要JavaScript。另外在IE 8中也可以使用！ :)

注意：这可能会破坏您的标签序列。

body {margin: 15px;}
.focus {cursor: pointer; display: inline-block; width: 100px; line-height: 100px; text-align: center; position: relative;}
.focus img,
.focus span {display: none;}
.focus span:first-child {display: block;}

.focus:focus {background: #f90;}
.focus:focus img,
.focus:focus span {display: block;}
.focus:focus span:first-child {display: none;}

.focus img {position: absolute; right: -150px; top: -25px; z-index: 9;}

<div class="focus" tabindex="0">
  <span>Click Me</span>
  <span>I am clicked!</span>
  <img src="//placehold.it/150?text=Big+Image" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me</span>
  <span>I am clicked!</span>
  <img src="//placehold.it/150?text=Big+Image" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me</span>
  <span>I am clicked!</span>
  <img src="//placehold.it/150?text=Big+Image" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me</span>
  <span>I am clicked!</span>
  <img src="//placehold.it/150?text=Big+Image" />
</div>

在理解了问题和要求后，我会提出另一种解决方案，也就是基于CSS的方法：

body {margin: 15px; padding-right: 250px;}
.focus {cursor: pointer; display: inline-block; width: 120px; line-height: 120px; text-align: center; white-space: nowrap;}
.focus img,
.focus span {display: none;}
.focus span:first-child {display: block;}

.focus:focus {background: #f90;}
.focus:focus img,
.focus:focus span {display: block;}
.focus:focus span:first-child {display: none;}

.focus img {position: absolute; right: 5px; top: 5px; z-index: 9;}

<div class="focus" tabindex="0">
  <span>Click Me 1</span>
  <span>You clicked 1!</span>
  <img src="//placehold.it/250?text=Big+Image+1" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me 2</span>
  <span>You clicked 2!</span>
  <img src="//placehold.it/250?text=Big+Image+2" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me 3</span>
  <span>You clicked 3!</span>
  <img src="//placehold.it/250?text=Big+Image+3" />
</div>
<div class="focus" tabindex="0">
  <span>Click Me 4</span>
  <span>You clicked 4!</span>
  <img src="//placehold.it/250?text=Big+Image+4" />
</div>

与CSS相同的效果！ :)

Answer 2

向<img>添加<p>标记，并根据所选缩略图更改src。

检查以下示例：

function show(el) {
  document.getElementById("zoom").src = el.src;
}

.images {
  float: left;
  margin-right: 10px;
  border: 1px solid silver;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 4px solid transparent;
}
.images img {
  height: 100px;
  width: auto;
}
.images:hover,
.images:visited,
.images:active {
  border: 4px solid #009EE0;
}
.table {
  width: 60%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;
}
p {
  overflow: auto;
}

<div class="table">
  <div class="images">
    <img src="http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300" onclick="show(this)">
  </div>
  <div class="images">
    <img src="https://www.drphillipscenter.org/resources/images/default.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300" onclick="show(this)">
  </div>
</div>
<p>
  <img id="zoom" src="" />
</p>

Answer 3

您可以在图片中添加position:relative样式的css，以便现在可以使用right:(n)px设置图像的显示位置，

或者您也可以在图片中使用position:absolute，但不要忘记在其父级中设置position:relative。

单击div元素时更改CSS代码

3 个答案: