发表一个javascript美术馆的小案例

   这个案例中将把相关的javascript和css样式都存放在不同的文件,便于管理。
  
     <html>
<head>
	<script src="scripts/showPic.js" type="text/javascript"></script>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
	<style>

	</style>
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li><a href="images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a></li>
		
		<li><a href="images/coffee.jpg" onclick="showPic(this); return false;" title="A cup of blcak coffee">Coffee</a></li>
		
		<li><a href="images/rose.jpg" onclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>
		
		<li><a href="images/bigben.jpg" onclick="showPic(this); return false;" title="the famous clock">Big Ben</a></li>
	</ul>
	<p id="description">Choose an image.</p>
	<img id="placehoder" width="500" src="images/bigben.jpg" alt="my image gallery"/>
</body>
</html>
   


以上代码有一点需要说明,onclick函数中有个return false;这是为了防止页面跳转到另外一个页面。

以下是相应的js代码:
 
    function showPic(whichpic){
		var source = whichpic.getAttribute("href");
		var placehoder = document.getElementById("placehoder");
		placehoder.setAttribute("src",source);
		var text = whichpic.getAttribute("title");
		var description = document.getElementById("description");
		description.firstChild.nodeValue=text;
}
function countBodyChildren(){
	var body_element = document.getElementsByTagName("body")[0];
	alert(body_element.nodeType);
}

  


css代码
  body{
	font-family:"Helvetica","Arial",sans-serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}
h1{
	color:#333;
	background-color:transparent;
}
a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}
ul{
	padding:0;
}
li{
	float:left;
	padding:1em;
	list-style:none;
}


发表一个javascript美术馆的小案例_第1张图片

大家可看到这个案例的不足之处?有三点:
1、预留退路,2、向后兼容3、分离javascript(在开发中我感觉3有可能比较注重)
改进后的代码在下载包中

你可能感兴趣的:(JavaScript,html,js,css,src)