Question

HTML

<body>
  <div class="thumbnails">
    <a href="#"><img src="http://s30.postimg.org/4yboplkxd/dotty.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s9.postimg.org/4fg0tjk5r/goldy.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s12.postimg.org/5lsgrnfcd/oily.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s29.postimg.org/mcpamwhaf/splashy.jpg" width="100" height="100"></a>
  </div>

  <div class="large-image"><div>
</body>

CSS

body {
margin:0;
padding:0;
}

.thumbnails {
  width: 250px;
  padding-top: 60px;
  padding-left: 60px;
  display: inline-block;
}

img {
  margin: 2px;      
}

img:hover {
 border: 1px solid black;  
}

我目前所拥有的是使用class =“缩略图”在div中缩小图像。

我想要实现的是当我点击缩略图时，我希望在div中使用class =“large-image”显示更大的图像。

Answer 1

包含jQuery库后，添加以下JS：

$("img").click(function() {
    $("div.large-image").empty().append($(this).clone().css('width',1000));
})

这会为您的所有图像添加一个事件监听器，当它们被点击时会触发。然后，它会移除.large-image div的所有内容，并附加img元素的副本。

图片库中的缩略图

1 个答案: