html代码:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Image Gallery</title>
<body>
<h1>Snapshots</h1>
<ul id="showPicGallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" >Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" >Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>
<p id="description">Choose an images</p>
<a href="https://baidu.com" class="popup">Example</a>
<script src="./jas.js"/>
</body>
</html>
javascript代码:
window.onload = function(){
prepareLinks();
handlePic();
}
function showPic (whichpic) {
var url = whichpic.getAttribute("href");
var title = whichpic.getAttribute("title");
var aElement = document.getElementById("placeholder");
var pElement = document.getElementById("description");
aElement.setAttribute("src",url);
//pElement.childNodes[0].nodeValue = title;
pElement.firstChild.nodeValue = title;
//alert(pElement.firstChild.nodeValue)
}
function handlePic(){
var ulElement = document.getElementById("showPicGallery");
var aTagArray = ulElement.getElementsByTagName("a");
for(var i= 0 ; i < aTagArray.length; i++){
aTagArray[i].onclick = function(){
showPic(this);
return false;
}
}
}
上边的window.onload处理函数还有改进的地方,目前的方法只是适合绑定函数少的情况。如果需要绑定很多个函数,且扩展性好的话,改进如下:
编写一个额外的,一劳永逸的代码:
//有多少个函数需要加载,只需要添加这一行代码即可
addLoadEvent(handlePic);
addLoadEvent(prepareLinks);
function addLoadEvent(fuc){
var oldOnlodEvent = window.onload;
if(typeof window.onload != "function"){
//如果处理函数上还没有绑定有函数,就像平时那样把新函数添加给它。
window.onload = fuc;
}else{
//如果处理函数上已经绑定有函数,就把新函数添追加到加到现有指令的末尾。
window.onload = function(){
oldOnlodEvent();
fuc();
}
}
}
添加样式效果图:
html代码:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen"/>
<body>
<h1>Snapshots</h1>
<ul id="showPicGallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/fireworks.jpg" alt="Fireworks"/>
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/coffee.jpg" alt="Coffee"/>
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" >
<img src="images/rose.jpg" alt="Rose"/>
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" >
<img src="images/bigben.jpg" alt="Bigben"/>
</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>
<p id="description">Choose an images</p>
<a href="https://baidu.com" class="popup">Example</a>
<script src="./jas.js"/>
</body>
</html>
css代码:
body{
font-family: "Heletica","Arial",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;
}
#showPicGallery{
list-style: none;
}
#showPicGallery li {
display: inline;
}
#showPicGallery li a img{
width: 200px;
height: 200px;
border: 0;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
文章评论