Question

我正在尝试实现Google图片搜索等功能，即当您点击图片时，图片下方的屏幕会显示一个子页面。它需要一整行。屏幕截图如下所示。 http://www.wy19900814fun.com/thumbnails/test.png

这是我的代码。有没有人帮我实施或至少给我一些建议？我正在尝试执行类似于单击图片的功能，第二个div类显示在您单击的图片下方。它需要整整一条线。

<html>
<head>
	<style>
		.container {
			text-align: center;
		}
		
		.container img {
			display:inline-block;
		}
		.subpage {
			display:none;
		}
	</style>
	<script type="text/javascript">
	
	</script>
</head>

<body>
	<div class="container">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
		<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
	</div>
	
	<div class="subpage">
		<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
	</div>
</body>
</html>

Answer 1

$('img').click(function() {
  var $img = $(this),
      offset = $img.offset(),
      subPage = $('#subPage').hide().insertAfter('.container'),
      nextImage = $img.next(),
      finalImage = $img;
  
  if (!$img.is(':last-child')) {
    while (offset.top == nextImage.offset().top) {
      nextImage = nextImage.next();
    }
    
    finalImage = nextImage.prev();
  }
  
  subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});

.container {
	text-align: center;
}

.container img {
	display:inline-block;
  width:32%;
  vertical-align:top;
}

#subPage {
  background:#222;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
	<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>

<div id="subPage"></div>

Answer 2

你可以这样做：

JS：

$(document).ready(function () {
    $('.container img').click(function () {
        var src = $(this).attr('src');
        var subpage = $('.subpage');
        subpage.hide().empty().fadeIn(250);
        $('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250);
    });
});

Jsfiddle

如何在页面内实现幻灯片页面

2 个答案: