我的一个相册小程序，来看看，多指点下小弟。

Question

演示地址：http://www.yaohaixiao.com/code/albums/index.html
相册程序代码：/**
 * Album.js 
 * @author Yaohaixiao <[email protected]>
 * @version 1.0.1.1 Beta
 * @copyright (c) 2008 Yaohaixiao, All Right Reserved.
 */
if (JSEasy.isUndefined(Album)) {
var Album = {
imagesArray: [],
loadingShardow: JSEasy.Builder.Node("div", {
id: "album-loadingshardow"
}),
loadingImage: JSEasy.Builder.Node("img", {
id: "album-loading",
src: "img/loading.gif",
alt: "loading"
}),
Shardow: JSEasy.Builder.Node("div", {
id: "album-shardow"
}),
Window: JSEasy.Builder.Node("div", {
id: "album-window"
}),
TitleBar: JSEasy.Builder.Node("div", {
id: "album-titlebar"
}),
Title: JSEasy.Builder.Node("h2"),
CloseBar: JSEasy.Builder.Node("div", {
id: "album-closebar"
}),
ActiveImage: JSEasy.Builder.Node("img", {
id: "album-activeimage"
}),
LoadingImage: JSEasy.Builder.Node("img", {
id: "album-loadingimage"
}),
InfoBar: JSEasy.Builder.Node("p", {
id: "album-infobar"
}),
StatusBar: JSEasy.Builder.Node("div", {
id: "album-statusbar"
}),
ControlBar: JSEasy.Builder.Node("div", {
id: "album-controls"
}),
FirstBtn: JSEasy.Builder.Node("img", {
id: "album-first",
src: "img/icon/resultset_first.png",
alt: "第一张"
}),
PreviousBtn: JSEasy.Builder.Node("img", {
id: "album-previous",
src: "img/icon/resultset_previous.png",
alt: "上一张"
}),
IndexInfoBar: JSEasy.Builder.Node("p", {
id: "album-indexinfo"
}),
NextBtn: JSEasy.Builder.Node("img", {
id: "album-next",
src: "img/icon/resultset_next.png",
alt: "下一张"
}),
LastBtn: JSEasy.Builder.Node("img", {
id: "album-last",
src: "img/icon/resultset_last.png",
alt: "最后一张"
}),
Name: "我的JSEasy相册"
};
} Album.Unit = {
init: function(){
if (!document.getElementsByTagName) {
return false;
}

var cTags = JSEasy.getElementsByClassName("albumbox", "a", document);
for (var i = 0; i < cTags.length; i++) {
Album.imagesArray.push([cTags[i], 0]);
}

var albumCSS = JSEasy.Builder.Node("link", {
rel: "stylesheet",
type: "text/css",
id: "albumCSS",
media: "all",
href: "css/album.css"
});
var docHead = document.getElementsByTagName("head")[0];
docHead.appendChild(albumCSS);

for (var j = 0; j < Album.imagesArray.length; j++) {
Album.imagesArray[j][0].setAttribute("ren", j);
Album.imagesArray[j][0].onclick = this.Start;
}
},
Start: function(){
JSEasy.setStyle(Album.Shardow, {
height: (JSEasy.getDocumentSize()[1] + 30) + "px"
});
document.body.appendChild(Album.Shardow);
JSEasy.Builder.Slider.Opacity(Album.Shardow, 40);

var path = this.href;
var alt = this.title;
var index = parseInt(this.getAttribute("ren"));

Album.Title.innerHTML = Album.Name;
Album.TitleBar.appendChild(Album.Title);
JSEasy.Builder.Attributes(Album.CloseBar, {
title: "关闭窗口"
});
Album.TitleBar.appendChild(Album.CloseBar);
Album.Window.appendChild(Album.TitleBar);

JSEasy.Builder.Attributes(Album.ActiveImage, {
src: path,
alt: alt,
ren: index
});
Album.Window.appendChild(Album.ActiveImage);

Album.InfoBar.innerHTML = alt;
JSEasy.Builder.Slider.Opacity(Album.InfoBar, 70);
Album.Window.appendChild(Album.InfoBar);

Album.ControlBar.appendChild(Album.FirstBtn);
Album.ControlBar.appendChild(Album.PreviousBtn);
Album.IndexInfoBar.innerHTML = JSEasy.stringBuffer((index + 1) + " / " + Album.imagesArray.length);
Album.ControlBar.appendChild(Album.IndexInfoBar);
Album.ControlBar.appendChild(Album.NextBtn);
Album.ControlBar.appendChild(Album.LastBtn);
Album.StatusBar.appendChild(Album.ControlBar);
Album.Window.appendChild(Album.StatusBar);

document.body.appendChild(Album.Window);
Album.Unit.PerLoading();

Album.CloseBar.onmouseover = function(){
this.style.background = "transparent url(img/tool-sprites.gif) -15px 0 no-repeat";
}
Album.CloseBar.onmouseout = function(){
this.style.background = "transparent url(img/tool-sprites.gif) 0 0 no-repeat";
}

Album.CloseBar.onclick = Album.Unit.End;
Album.Shardow.onclick = Album.Unit.End;

Album.FirstBtn.onclick = Album.Unit._First;
Album.PreviousBtn.onclick = Album.Unit._Previous;
Album.NextBtn.onclick = Album.Unit._Next;
Album.LastBtn.onclick = Album.Unit._Last;
return false;
},
_First: function(){
if (parseInt(Album.ActiveImage.getAttribute("ren")) > 0) {
Album.Unit.ChangeImage(0);
}
},
_Previous: function(){
if (parseInt(Album.ActiveImage.getAttribute("ren")) > 0) {
Album.Unit.ChangeImage((parseInt(Album.ActiveImage.getAttribute("ren")) - 1));
}
},
_Next: function(){
if (parseInt(Album.ActiveImage.getAttribute("ren")) < (Album.imagesArray.length - 1)) {
Album.Unit.ChangeImage((parseInt(Album.ActiveImage.getAttribute("ren")) + 1));
}
},
_Last: function(){
if (parseInt(Album.ActiveImage.getAttribute("ren")) < (Album.imagesArray.length - 1)) {
Album.Unit.ChangeImage((Album.imagesArray.length - 1));
}
},
ChangeImage: function(index){
var imgAlt = Album.imagesArray[index][0].getAttribute("title");
var imgPath = Album.imagesArray[index][0].getAttribute("href");

JSEasy.Builder.Attributes(Album.ActiveImage, {
src: imgPath,
alt: imgAlt,
ren: index
});

Album.InfoBar.innerHTML = imgAlt;
Album.IndexInfoBar.innerHTML = JSEasy.stringBuffer((index + 1), " / ", Album.imagesArray.length);

Album.Unit.PerLoading();
},
PerLoading: function(){
var iVisited = Album.imagesArray[parseInt(Album.ActiveImage.getAttribute("ren"))][1];
if (iVisited == 0) {
Album.Unit.Loading.show();
}

var tempImg = new Image();
tempImg.src = Album.ActiveImage.getAttribute("src");

if (tempImg.complete) {
Album.Unit.FixPosition.call(tempImg);
}
else {
tempImg.onload = function(){
Album.Unit.FixPosition.call(tempImg);
}
}
},
Loading: {
show: function(){
JSEasy.Builder.Slider.Opacity(Album.loadingShardow, 40);
Album.Window.appendChild(Album.loadingShardow);
Album.Window.appendChild(Album.loadingImage);
},

hide: function(){
var loadingshardow = $("album-loadingshardow");
var loading = $("album-loading");
if (loading) {
Album.Window.removeChild(loadingshardow);
Album.Window.removeChild(loading);
}
}
},
FixPosition: function(){
var actWidth = this.width;
var actHeight = this.height;
var actIndex = parseInt(Album.ActiveImage.getAttribute("ren"));
var yScroll = JSEasy.getScroll()[1];
var winHeight = JSEasy.getWindowSize()[1];
var actTop = actHeight > winHeight ? "0" : JSEasy.stringBuffer((yScroll + ((winHeight - (actHeight + 6))/2)) + "px");
var actLeft = JSEasy.stringBuffer("-" + (actWidth/ 2 + 3), "px");

JSEasy.setStyle(Album.ActiveImage, {
width: actWidth + "px",
height: actHeight + "px"
});
JSEasy.setStyle(Album.Window, {
width: actWidth + "px",
height: actHeight + "px",
marginTop:"0",
top: actTop,
marginLeft: actLeft,
display: "block"
});
Album.Unit.Loading.hide();

if (Album.imagesArray[actIndex][1] == 0) {
Album.imagesArray[actIndex][1] = 1;
}
},
End: function(){
document.body.removeChild(Album.Shardow);
document.body.removeChild(Album.Window);
}
};

Answer 1

提示窗口代码
/**
 * Alert.js 
 * @author Yaohaixiao <[email protected]>
 * @version 1.0.1.1 Beta
 * @copyright (c) 2008 Yaohaixiao, All Right Reserved.
 */
if(JSEasy.isUndefined(Alert)){
var Alert = {
Version: "1.0.0.1 Beta",
isShardowShow: true,
Shardow: JSEasy.Builder.Node("div", {
id: "alert-shardow"
}),
Window: JSEasy.Builder.Node("div", {
id: "alert-window"
}),
TitleBar: JSEasy.Builder.Node("div", {
id: "alert-titlebar"
}),
Title: JSEasy.Builder.Node("h2", {
id: "alert-title"
}),
CloseBar: JSEasy.Builder.Node("span", {
id: "alert-closebar",
title: "关闭窗口"
}),
TitleRight: JSEasy.Builder.Node("span", {
id: "alert-titleright"
}),
BorderLeft: JSEasy.Builder.Node("div", {
id: "alert-borderleft"
}),
BorderRight: JSEasy.Builder.Node("div", {
id: "alert-borderright"
}),
Content: JSEasy.Builder.Node("div", {
id: "alert-content"
}),
Message: JSEasy.Builder.Node("p",{
id: "alert-message"
}),
OKButton:JSEasy.Builder.Node("a",{
id: "alert-okbutton",
href:"#1",
title:"确 定"
}),
CancelButton:JSEasy.Builder.Node("a",{
id: "alert-cancelbutton",
href:"#1",
title:"取 消"
}),
BorderBottom: JSEasy.Builder.Node("div", {
id: "alert-borderbottom"
}),
LeftBottom: JSEasy.Builder.Node("div", {
id: "alert-leftbottom"
}),
RightBottom: JSEasy.Builder.Node("div", {
id: "alert-rightbottom"
}),
ClosedTarget: null,
};
};Alert.Unit={
    init:function(title,msg,type,objClosed){
if (objClosed) {
Alert.ClosedTarget = $(objClosed);
}
var header = document.getElementsByTagName("head")[0];
var alertCSS = JSEasy.Builder.Node("link",{
rel:"stylesheet",
href:"css/alert.css",
type:"text/css",
media:"all"
});
header.appendChild(alertCSS);

if(Alert.isShardowShow){
JSEasy.setStyle(Alert.Shardow,{
height: JSEasy.getDocumentSize()[1] + "px"
});
JSEasy.Builder.Slider.Opacity(Alert.Shardow,50);
document.body.appendChild(Alert.Shardow);
}
switch(type){
case "error":
  JSEasy.setStyle(Alert.Content,{
    backgroundImage:"url(img/window/icon-error.gif)"
  });
  break;
case "warning":
  alert(Alert.Content);
  JSEasy.setStyle(Alert.Content,{
    backgroundImage:"url(img/window/icon-warning.gif)"
  });
  break;
case "confirm":
  JSEasy.setStyle(Alert.Window,{
 height:"130px"
  });
  JSEasy.setStyle(Alert.BorderLeft,{
 height:"101px"
  });
  JSEasy.setStyle(Alert.Content,{
    background:"transparent url(img/window/icon-question.gif) 13px 13px no-repeat",
 height:"101px"
  });
  JSEasy.setStyle(Alert.Message,{
 height:"51px"
  });
  JSEasy.setStyle(Alert.BorderRight,{
 height:"101px"
  });
  JSEasy.setStyle(Alert.OKButton,{
 margin:"8px 0 9px 108px"
  });
  JSEasy.setStyle(Alert.CancelButton,{
 margin:"8px 108px 9px 0"
  });
  break;  
}
        Alert.Title.innerHTML = title;
Alert.TitleBar.appendChild(Alert.Title);
Alert.TitleBar.appendChild(Alert.TitleRight);
Alert.TitleBar.appendChild(Alert.CloseBar);
Alert.Window.appendChild(Alert.TitleBar);

Alert.Window.appendChild(Alert.BorderLeft);
Alert.Message.innerHTML = msg;
Alert.Content.appendChild(Alert.Message);
Alert.Content.appendChild(Alert.OKButton);
Alert.Window.appendChild(Alert.Content);
Alert.Window.appendChild(Alert.BorderRight);

Alert.BorderBottom.appendChild(Alert.LeftBottom);
Alert.BorderBottom.appendChild(Alert.RightBottom);
Alert.Window.appendChild(Alert.BorderBottom);

document.body.appendChild(Alert.Window);

Alert.CloseBar.onclick = this.End;
if (type == "confirm") {
Alert.Content.appendChild(Alert.CancelButton);
    Alert.CancelButton.onclick = this.Cancel;
Alert.OKButton.onclick = this.ComfirmEnd;
} 
else{
Alert.OKButton.onclick = this.End;
}
},

ComfirmEnd: function(){
if (Alert.ClosedTarget != null) {
document.body.removeChild(Alert.ClosedTarget);
}
    Alert.Content.removeChild(Alert.CancelButton);
Alert.Unit.RestoreWindow();
Alert.Unit.End();
},

Cancel:function(){
    Alert.Content.removeChild(Alert.CancelButton);
Alert.Unit.RestoreWindow();
Alert.Unit.End();
},

RestoreWindow: function(){
JSEasy.setStyle(Alert.Window,{
height:"180px"
});
JSEasy.setStyle(Alert.BorderLeft,{
height:"151px"
});
JSEasy.setStyle(Alert.Content,{
background:"transparent url(img/window/icon-info.gif) 13px 13px no-repeat",
height:"151px"
});
JSEasy.setStyle(Alert.Message,{
height:"101px"
});
JSEasy.setStyle(Alert.BorderRight,{
height:"151px"
});
JSEasy.setStyle(Alert.OKButton,{
margin:"8px 0 9px 164px"
});
},

End:function(){
if(Alert.isShardowShow){
document.body.removeChild(Alert.Shardow);
}
document.body.removeChild(Alert.Window);
}
};