Question

目前我面临着网页设计问题。

我正在尝试实施Google图片搜索等功能。当我在Google图片搜索中点击一张图片时，会在我点击的图片下面显示一个子页面。

我不知道如何描述或调用此子页面。有没有人可以告诉我如何实现这个或它是什么样的技术。

这是图片。（谷歌做了什么） http://www.wy19900814fun.com/thumbnails/test.png

<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>

这是我的代码。是否有人可以更改我的代码以显示包含第二个div信息的子页面。并将其显示在您单击的图像下方。

Answer 1

要实现这一目标，您需要：

了解/学习HTML基础
知识/学习javascript基础
了解/学习AJAX基础
了解/学习任何服务器端语言
可能（和期望）MySQL或某种DB语言。

实施它的基本步骤

为每张图片生成HTML
使用javascript将点击事件绑定到每个图片
使用AJAX向您的服务器发出请求
使用服务器端语言（和所需的数据库）获取图像数据（标题，信息，外部链接或其他）
使用JS解析响应并操纵DOM以添加并显示新数据。

如何实现内页扩展等功能

1 个答案:

实施它的基本步骤

推荐资源