简单的图片库浏览页面(代码优化)

最新推荐文章于 2019-03-25 19:35:29 发布

Lucine_mm

最新推荐文章于 2019-03-25 19:35:29 发布

阅读量1.5k

点赞数 1

分类专栏：前端

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

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上一篇文章已经将JS代码和HTML文档分的很开了,负责实际完成各项任务的JS函数已存入了外部文档，唯一没有分开的便是在HTML中使用onlick属性，这样的做法效率低而且还很容易引发问题。

具体的优化代码如下

//jsgrammar.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="imageGallery">	
   	<li>
   	<a href="Image/rose.jpg" title="rose Image">rose Image</a></li>
   	<li>
   	<a href="Image/bird.jpg" title="bird Image">bird Image</a>
   	</li>
   	<li><a href="Image/shanghai.jpg" title="shanghai Image">shanghai Image</a>
   	</li>
   	<li><a href="Image/beautifulrose.jpg" 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>

//showPic.js
addLoadEvent(prepareGallery);
function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof oldonload!='function'){
		window.onload=func;
	}else{
		window.onload=function(){
			func();
		}
	}
} 
function prepareGallery(){
         var gallery=document.getElementById("imageGallery");
         var tagArray=gallery.getElementsByTagName("a");
         /*

         var tagArray=document.getElementsByTagName("a");
         这句代码的作用和上面两句代码的结果是一样的，都是
         获取a标签数组，前两句代码是通过a标签外的ul的id获取ul下
         a标签数组，注释中的代码是直接从html获取a标签数组，这样做的
         目的是，当html中有多个a标签时，可以通过对应的id准确的获取对应
         的a标签数组。

         */
         for (var i = 0; i < tagArray.length; i++) {
         	tagArray[i].onclick=function(){
               showPic(this);
         	   return false;
         	}	
         }
    }

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

//layout.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
}