简单的图片库浏览页面

最新推荐文章于 2018-11-27 10:27:15 发布

Lucine_mm

最新推荐文章于 2018-11-27 10:27:15 发布

阅读量1.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Lucine_mm/article/details/83038213

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能描述：

点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面。

代码实现：

//html代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Image Gallery</title>  
    <link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">
</head>
<body>
  <!-- 功能:点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面 -->
   <h1>Snapshots</h1>
   <ul id="imagegal">	
   	<li>
   	<a href="Image/rose.jpg" onclick="showPic(this);return false" title="rose Image">rose Image</a></li>
   	<li>
   	<a href="Image/bird.jpg" onclick="showPic(this);return false" title="bird Image">bird Image</a>
   	</li>
   	<li><a href="Image/shanghai.jpg" onclick="showPic(this);return false" title="shanghai Image">shanghai Image</a>
   	</li>
   	<li><a href="Image/beautifulrose.jpg" onclick="showPic(this);return false" title="beautifulrose Image">beautifulrose Image</a>
   	</li>
   	<img id="placeholder" src="Image/gallery.jpg">
    <p id="description">Choose an image</p>
   </ul>
</body>
 <script type="text/javascript" src="scripts/showPic.js"></script>
</html>

CSS代码

body{ 
   font-family: "Helvetica","Arial",serif;
   color: #333;
   background-color: #ccc;
   margin: 1em 10%;
}

h1{
	color: #333;
	background-color: transparent;
}

a{
	color: #008000;
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}

ul{
	padding: 0;
}

li{
	float: left;
	padding: 1em;
	list-style: none;
}

img{
    display: block;
    clear: both
}

JS代码

function showPic(whichPic){
	   
     	var num1=whichPic.getAttribute("href");
       	var placeholder=document.getElementById("placeholder");
       	placeholder.setAttribute("src",num1);
		
		var titleNume2=whichPic.getAttribute("title");
		var description=document.getElementById("description");
		
		/*
		  注:将titleNume2的值赋值给descriptionText
		  将titleNume2直接赋值给description.innerText
		  是不一样的
		*/
		//var descriptionText=description.innerText;
		//descriptionText=titleNume2;
		
		 // 下面这两种方式都可以实现P标签里的内容替换
		//description.innerText=titleNume2;
		
		description.firstChild.nodeValue=titleNume2;	
     }

Lucine_mm

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
简单的图片库浏览页面

功能描述：点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面。代码实现：//html代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Image Gallery&lt;/title&gt;
复制链接

扫一扫