这个版本的gallery更加的将页面和行为分离，通过DOM的插入节点功能
将只用来占位的img标签和description标签(<p id="description">Choose a image</p><img id="palceholder" src="images/e.jpg" alt="hehe">
)通过js来插入到页面。
方法insertAfter是向节点添加节点
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
方法addLoadEvent是为页面添加自动加载事件
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
这两个方法是非常实用的，以后将会经常用到。
以下是代码部分
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Gallery</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Gallery</h1> <ul id="imagegallery"> <li><a href="images/a.jpg" title="Lorem ipsum dolor sit amet,"><img src="images/a.jpg" alt="Lorem"></a></li> <li><a href="images/b.jpg" title="consectetur adipisicing"><img src="images/b.jpg" alt="Lorem"></a></li> <li><a href="images/c.jpg" title="alias ab quos cupiditate"><img src="images/c.jpg" alt="Lorem"></a></li> <li><a href="images/d.jpg" title="dignissimos eligendi cum "><img src="images/d.jpg" alt="Lorem"></a></li> </ul> <!-- <p id="description">Choose a image</p> <img id="palceholder" src="images/e.jpg" alt="hehe"> --> <script src="js/showPic.js"></script> </body> </html>
JavaScript:
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement)return false;
if(!document.createTextNode)return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false;
var palceholder=document.createElement("img");
palceholder.setAttribute("id","palceholder");
palceholder.setAttribute("src","images/e.jpg");
palceholder.setAttribute("alt","my image gallery");
var description=document.createElement("p");
description.setAttribute("id","description");
var desctext=document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery=document.getElementById("imagegallery");
insertAfter(description,gallery);
insertAfter(palceholder,description);
}
function prepareGallery(){
//判断是否支持以下这些方法
if(!document.getElementById)return false;
if(!document.getElementsByTagName)return false;
if(!document.getElementById("imagegallery"))return false;
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
return showpic(this);
}
links[i].onkeypress=links[i].onclick;
}
}
function showpic(whichpic){
if(!document.getElementById("palceholder"))return true;
var source=whichpic.getAttribute("href");
var palceholder=document.getElementById("palceholder");
palceholder.setAttribute("src",source);
if(document.getElementById("description")){
if(whichpic.getAttribute("title")){
var text=whichpic.getAttribute("title");
}else{
text="";
}
var description= document.getElementById("description");
if(description.firstChild.nodeType===3)
description.firstChild.nodeValue=text;
}
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);