我的相册程序

演示地址： http://www.yaohaixiao.com/code/albums/index.html

代码：

1. /**
2.  * Album.js 
3.  * @author Yaohaixiao <haixiao_yao@yahoo.com.cn>
4.  * @version 1.0.1.1 Beta
5.  * @copyright (c) 2008 Yaohaixiao, All Right Reserved.
6.  */
7. if (JSEasy.isUndefined(Album)) {
8.     var Album = {
9.         imagesArray: [],
10.         loadingShardow: JSEasy.Builder.Node("div", {
11.             id: "album-loadingshardow"
12.         }),
13.         loadingImage: JSEasy.Builder.Node("img", {
14.             id: "album-loading",
15.             src: "img/loading.gif",
16.             alt: "loading"
17.         }),
18.         Shardow: JSEasy.Builder.Node("div", {
19.             id: "album-shardow"
20.         }),
21.         Window: JSEasy.Builder.Node("div", {
22.             id: "album-window"
23.         }),
24.         TitleBar: JSEasy.Builder.Node("div", {
25.             id: "album-titlebar"
26.         }),
27.         Title: JSEasy.Builder.Node("h2"),
28.         CloseBar: JSEasy.Builder.Node("div", {
29.             id: "album-closebar"
30.         }),
31.         ActiveImage: JSEasy.Builder.Node("img", {
32.             id: "album-activeimage"
33.         }),
34.         LoadingImage: JSEasy.Builder.Node("img", {
35.             id: "album-loadingimage"
36.         }),
37.         InfoBar: JSEasy.Builder.Node("p", {
38.             id: "album-infobar"
39.         }),
40.         StatusBar: JSEasy.Builder.Node("div", {
41.             id: "album-statusbar"
42.         }),
43.         ControlBar: JSEasy.Builder.Node("div", {
44.             id: "album-controls"
45.         }),
46.         FirstBtn: JSEasy.Builder.Node("img", {
47.             id: "album-first",
48.             src: "img/icon/resultset_first.png",
49.             alt: "第一张"
50.         }),
51.         PreviousBtn: JSEasy.Builder.Node("img", {
52.             id: "album-previous",
53.             src: "img/icon/resultset_previous.png",
54.             alt: "上一张"
55.         }),
56.         IndexInfoBar: JSEasy.Builder.Node("p", {
57.             id: "album-indexinfo"
58.         }),
59.         NextBtn: JSEasy.Builder.Node("img", {
60.             id: "album-next",
61.             src: "img/icon/resultset_next.png",
62.             alt: "下一张"
63.         }),
64.         LastBtn: JSEasy.Builder.Node("img", {
65.             id: "album-last",
66.             src: "img/icon/resultset_last.png",
67.             alt: "最后一张"
68.         }),
69.         Name: "我的JSEasy相册"
70.     };
71. }   
73. Album.Unit = {
74.     init: function(){
75.         if (!document.getElementsByTagName) {
76.             return false;
77.         }
78.         
79.         var cTags = JSEasy.getElementsByClassName("albumbox", "a", document);
80.         for (var i = 0; i < cTags.length; i++) {
81.             Album.imagesArray.push([cTags[i], 0]);
82.         }
83.         
84.         var albumCSS = JSEasy.Builder.Node("link", {
85.             rel: "stylesheet",
86.             type: "text/css",
87.             id: "albumCSS",
88.             media: "all",
89.             href: "css/album.css"
90.         });
91.         var docHead = document.getElementsByTagName("head")[0];
92.         docHead.appendChild(albumCSS);
93.         
94.         for (var j = 0; j < Album.imagesArray.length; j++) {
95.             Album.imagesArray[j][0].setAttribute("ren", j);
96.             Album.imagesArray[j][0].onclick = this.Start;
97.         }
98.     },
99.     Start: function(){
100.         JSEasy.setStyle(Album.Shardow, {
101.             height: (JSEasy.getDocumentSize()[1] + 30) + "px"
102.         });
103.         document.body.appendChild(Album.Shardow);
104.         JSEasy.Builder.Slider.Opacity(Album.Shardow, 40);
105.         
106.         var path = this.href;
107.         var alt = this.title;
108.         var index = parseInt(this.getAttribute("ren"));
109.         
110.         Album.Title.innerHTML = Album.Name;
111.         Album.TitleBar.appendChild(Album.Title);
112.         JSEasy.Builder.Attributes(Album.CloseBar, {
113.             title: "关闭窗口"
114.         });
115.         Album.TitleBar.appendChild(Album.CloseBar);
116.         Album.Window.appendChild(Album.TitleBar);
117.         
118.         JSEasy.Builder.Attributes(Album.ActiveImage, {
119.             src: path,
120.             alt: alt,
121.             ren: index
122.         });
123.         Album.Window.appendChild(Album.ActiveImage);
124.         
125.         Album.InfoBar.innerHTML = alt;
126.         JSEasy.Builder.Slider.Opacity(Album.InfoBar, 70);
127.         Album.Window.appendChild(Album.InfoBar);
128.         
129.         Album.ControlBar.appendChild(Album.FirstBtn);
130.         Album.ControlBar.appendChild(Album.PreviousBtn);
131.         Album.IndexInfoBar.innerHTML = JSEasy.stringBuffer((index + 1) + " / " + Album.imagesArray.length);
132.         Album.ControlBar.appendChild(Album.IndexInfoBar);
133.         Album.ControlBar.appendChild(Album.NextBtn);
134.         Album.ControlBar.appendChild(Album.LastBtn);
135.         Album.StatusBar.appendChild(Album.ControlBar);
136.         Album.Window.appendChild(Album.StatusBar);
137.         
138.         document.body.appendChild(Album.Window);
139.         Album.Unit.PerLoading();
140.         
141.         Album.CloseBar.onmouseover = function(){
142.             this.style.background = "transparent url(img/tool-sprites.gif) -15px 0 no-repeat";
143.         }
144.         Album.CloseBar.onmouseout = function(){
145.             this.style.background = "transparent url(img/tool-sprites.gif) 0 0 no-repeat";
146.         }
147.         
148.         Album.CloseBar.onclick = Album.Unit.End;
149.         Album.Shardow.onclick = Album.Unit.End;
150.         
151.         Album.FirstBtn.onclick = Album.Unit._First;
152.         Album.PreviousBtn.onclick = Album.Unit._Previous;
153.         Album.NextBtn.onclick = Album.Unit._Next;
154.         Album.LastBtn.onclick = Album.Unit._Last;
155.         return false;
156.     },
157.     _First: function(){
158.         if (parseInt(Album.ActiveImage.getAttribute("ren")) > 0) {
159.             Album.Unit.ChangeImage(0);
160.         }
161.     },
162.     _Previous: function(){
163.         if (parseInt(Album.ActiveImage.getAttribute("ren")) > 0) {
164.             Album.Unit.ChangeImage((parseInt(Album.ActiveImage.getAttribute("ren")) - 1));
165.         }
166.     },
167.     _Next: function(){
168.         if (parseInt(Album.ActiveImage.getAttribute("ren")) < (Album.imagesArray.length - 1)) {
169.             Album.Unit.ChangeImage((parseInt(Album.ActiveImage.getAttribute("ren")) + 1));
170.         }
171.     },
172.     _Last: function(){
173.         if (parseInt(Album.ActiveImage.getAttribute("ren")) < (Album.imagesArray.length - 1)) {
174.             Album.Unit.ChangeImage((Album.imagesArray.length - 1));
175.         }
176.     },
177.     ChangeImage: function(index){
178.         var imgAlt = Album.imagesArray[index][0].getAttribute("title");
179.         var imgPath = Album.imagesArray[index][0].getAttribute("href");
180.         
181.         JSEasy.Builder.Attributes(Album.ActiveImage, {
182.             src: imgPath,
183.             alt: imgAlt,
184.             ren: index
185.         });
186.         
187.         Album.InfoBar.innerHTML = imgAlt;
188.         Album.IndexInfoBar.innerHTML = JSEasy.stringBuffer((index + 1), " / ", Album.imagesArray.length);
189.         
190.         Album.Unit.PerLoading();
191.     },
192.     PerLoading: function(){
193.         var iVisited = Album.imagesArray[parseInt(Album.ActiveImage.getAttribute("ren"))][1];
194.         if (iVisited == 0) {
195.             Album.Unit.Loading.show();
196.         }
197.         
198.         var tempImg = new Image();
199.         tempImg.src = Album.ActiveImage.getAttribute("src");
200.         
201.         if (tempImg.complete) {
202.             Album.Unit.FixPosition.call(tempImg);
203.         }
204.         else {
205.             tempImg.onload = function(){
206.                 Album.Unit.FixPosition.call(tempImg);
207.             }
208.         }
209.     },
210.     Loading: {
211.         show: function(){
212.             JSEasy.Builder.Slider.Opacity(Album.loadingShardow, 40);
213.             Album.Window.appendChild(Album.loadingShardow);
214.             Album.Window.appendChild(Album.loadingImage);
215.         },
216.         
217.         hide: function(){
218.             var loadingshardow = $("album-loadingshardow");
219.             var loading = $("album-loading");
220.             if (loading) {
221.                 Album.Window.removeChild(loadingshardow);
222.                 Album.Window.removeChild(loading);
223.             }
224.         }
225.     },
226.     FixPosition: function(){
227.         var actWidth = this.width;
228.         var actHeight = this.height;
229.         var actIndex = parseInt(Album.ActiveImage.getAttribute("ren"));
230.         var yScroll = JSEasy.getScroll()[1];
231.         var winHeight = JSEasy.getWindowSize()[1];
232.         var actTop = actHeight > winHeight ? "0" : JSEasy.stringBuffer((yScroll + ((winHeight - (actHeight + 6))/2)) + "px");
233.         var actLeft = JSEasy.stringBuffer("-" + (actWidth/ 2 + 3), "px");
234.         
235.         JSEasy.setStyle(Album.ActiveImage, {
236.             width: actWidth + "px",
237.             height: actHeight + "px"
238.         });
239.         JSEasy.setStyle(Album.Window, {
240.             width: actWidth + "px",
241.             height: actHeight + "px",
242.             marginTop:"0",
243.             top: actTop,
244.             marginLeft: actLeft,
245.             display: "block"
246.         });
247.         Album.Unit.Loading.hide();
248.         
249.         if (Album.imagesArray[actIndex][1] == 0) {
250.             Album.imagesArray[actIndex][1] = 1;
251.         }
252.     },
253.     End: function(){
254.         document.body.removeChild(Album.Shardow);
255.         document.body.removeChild(Album.Window);
256.     }
257. };