JS写的一个相册
// JavaScript template using Windows Script Host
var WSHShell = WScript.CreateObject("WScript.Shell");
WSHShell.Popup( "Hello World!" );
myLib.Albums = {
oImgs: document.getElementsByTagName("img"), // 页面中所有需要显示的图片对象（img标签）
oAlbumsImgs: new Array(), // 所有需要在相册中显示图片的对象
oAlbumsPath: new Array(), // 所有需要在相册中显示图片的路径
pathIndex: 0,
oShardow: null, // 阴影层
oImgContainer: null, // 相册容器层
oCurrentImg: null, // 当前显示的图片对象（img标签）
oInfoBar: null, // 相册顶部信息条
oNavBar: null, // 相册底部导航条
oLogoBar: null, // 相册Logo容器
oTxtInfo: null, // 图片简介信息容器
oCloseBar: null, // 关闭按钮
oPrePage: null, // 上一页
oTxtIndex: null, // 图片索引信息容器
oNextPage: null, // 下一页
sLogoPath: "img/logo.jpg", // 相册Logo地址
sTxtPrePage: "上一页",
sImgCount: "", // 图片总数量
sTxtNextPage: "下一页",
sCurrentTxtIndex: 0, // 当前图片在oAlbumsImgs中的索引信息
sCurrentImgPath: "", // 当前显示图片的路径
sCurrentImgAlt: "", // 当前图片的（Alt）简介信息
sIndex: 0, // 当前索引
sTxtIndexInfo: "", // 完整的索引信息
stylePageEnable: {
color: "#000",
textDecoration: "underline",
cursor: "pointer"
},
stylePageDisable: {
color: "#CCC",
textDecoration: "none",
cursor: "default"
},
init: function(){
for(var i=0;i<this.oImgs.length;i++){
// 获得所有图片（img标签）的（className）样式
var imgClass = this.oImgs[i].className || this.oImgs[i].getAttribute("class");
// 如果图片样式为“albumsImg”，则将改图片添加到oAlbumsImgs数组中
if(imgClass=="albumsImg"){
this.oAlbumsPath[this.pathIndex] = this.oImgs[i].src; // 获得所有图片路径
this.oAlbumsImgs[this.pathIndex] = this.oImgs[i]; // 获得所有图片对象
this.oAlbumsImgs[this.pathIndex].setAttribute("rel",this.pathIndex); // 为图片设置（rel属性）索引
this.sImgCount = this.oAlbumsImgs.length; // 获得要显示到相册中的图片总数
this.oAlbumsImgs[this.pathIndex].onclick = function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var com = myLib.Com;
var curPath = o.sCurrentImgPath = this.src; // 获得当前点击图片的路径
var curIndex = o.sCurrentTxtIndex = parseInt(this.getAttribute("rel")); // 获得当前点击图片的索引值
o.sIndex = curIndex + 1; // 索引值
var curAlt = o.sCurrentImgAlt = this.getAttribute("alt"); // 获取当前图片简介信息
var txtIndex = (curIndex+1) + " / " + o.sImgCount;
// 执行创建相册DOM容器的闭包函数
(function(){
// 创建阴影层
var shardow = document.createElement("div");
shardow.setAttribute("id","shardow");
// 将样式应用到阴影层上
dom.className.add(shardow,"styleShardow");
// 将阴影层追加到文档中
document.body.appendChild(shardow);
// 创建（img标签）图片
var curImg = document.createElement("img");
curImg.setAttribute("id","curimg");
curImg.setAttribute("alt",curAlt);
curImg.setAttribute("src",curPath);
curImg.src = curPath;
// 创建相册容器层
var container = document.createElement("div");
container.setAttribute("id","albumscontainer");
// 将样式应用到相册容器层上
dom.className.add(container,"styleContainer");
// 将图片添加到相册容器上
container.appendChild(curImg);
// 创建信息栏
var infobar = document.createElement("div");
infobar.setAttribute("id","infobar");
infobar.style.display = "block";
// 将样式应用到信息栏上
dom.className.add(infobar,"styleInfoBar");
// 创建图片信息条
var imginfo = document.createElement("p");
imginfo.setAttribute("id","imginfo");
dom.className.add(imginfo,"styleAltInfo");
// 创建提示信息文本
var txtAltInfo = document.createTextNode(curAlt);
// 将文本信息添加到信息条中
imginfo.appendChild(txtAltInfo);
// 将信息条添加到信息栏中去
infobar.appendChild(imginfo);
// 创建LOGO信息层
var albumsLogo = document.createElement("img");
albumsLogo.setAttribute("id","logo");
albumsLogo.setAttribute("alt","订餐小秘书");
albumsLogo.setAttribute("src",o.sLogoPath);
albumsLogo.src = o.sLogoPath;
// 将样式应用到LOGO上
dom.className.add(albumsLogo,"styleLogo");
// 将LOGO添加到信息栏中
infobar.appendChild(albumsLogo);
// 创建关闭按钮
var closebar = document.createElement("img");
closebar.setAttribute("id","closebar");
closebar.setAttribute("src","img/g_close.gif");
closebar.src = "img/g_close.gif";
closebar.setAttribute("alt","关闭窗口");
dom.className.add(closebar,"styleCloseBar");
// 将关闭按钮添加到信息栏中
infobar.appendChild(closebar);
// 将信息栏添加到相册容器上
container.appendChild(infobar);
// 创建底部导航信息栏
var navbar = document.createElement("div");
navbar.setAttribute("id","navbar");
// 将导航栏样式应用到该层
dom.className.add(navbar,"styleNavBar");
// 创建图片索引信息导航条
var txtIndex = document.createElement("p");
txtIndex.setAttribute("id","txtindex");
// 将样式应用到信息条上
dom.className.add(txtIndex,"styleAltInfo");
// 获得完整的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + o.sIndex + " / " + o.sImgCount;
// 创建索引信息文本
var textIndex = document.createTextNode(o.sTxtIndexInfo);
// 将文本追加到信息条中
txtIndex.appendChild(textIndex);
// 将索引信息条添加到导航信息栏中
navbar.appendChild(txtIndex);
// 创建上一页导航
var prePage = document.createElement("p");
prePage.setAttribute("id","prePage");
// 将样式应用到上一页导航上
dom.className.add(prePage,"stylePrePage");
// 创建上一页导航文本
var txtPrePage = document.createTextNode(o.sTxtPrePage);
prePage.appendChild(txtPrePage);
// 将文本追加到导航上
navbar.appendChild(prePage);
// 创建下一页导航
var nextPage = document.createElement("p");
nextPage.setAttribute("id","nextPage");
// 将样式应用到该层上
dom.className.add(nextPage,"styleNextPage");
// 创建下一页导航文本
var txtNextPage = document.createTextNode(o.sTxtNextPage);
nextPage.appendChild(txtNextPage);
// 将文本追加到导航中
navbar.appendChild(nextPage);
// 将导航栏添加到相册容器中
container.appendChild(navbar);
// 将相册容器添加到文档中
document.body.appendChild(container);
o.oShardow = shardow;
o.oCurrentImg = curImg;
o.oImgContainer = container;
o.oInfoBar = infobar;
o.oTxtInfo = imginfo;
o.oCloseBar = closebar;
o.oNavBar = navbar;
o.oPrePage = prePage;
o.oTxtIndex = txtIndex;
o.oNextPage = nextPage;
o.fixPos();
// 根据索引控制翻页导航是否可用
if (o.sIndex == o.sImgCount) {
dom.setStyle(nextPage, o.stylePageDisable); // 最后一张时，下一页按钮不可用
}
else {
if (o.sIndex == 1)
dom.setStyle(prePage, o.stylePageDisable); // 第一张时，上一页按钮不可用
}
// 给相册层添加逐渐显示的动画效果
dom.slideUp(container);
closebar.onclick = o.close;
nextPage.onclick = o.next;
prePage.onclick = o.previous;
curImg.onclick = o.show;
})();
return false; // 消除A标签默认动作
}
this.pathIndex++;
}
}
},
// 关闭相册
close: function(){
var pos = 100;
var o = myLib.Albums;
var dom = myLib.Dom;
var tt = window.setInterval(function(){
if (pos <= 5) {
if (tt) {
document.body.removeChild(o.oImgContainer);
document.body.removeChild(o.oShardow);
window.clearInterval(tt);
}
}
else {
pos -= 5;
dom.setOpacity(o.oImgContainer, pos);
}
},50);
},
// 显示下一张图片
next: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var temIndex = o.sIndex + 1;
// 如果当前图片不是最后一张
if(o.sIndex != o.sImgCount){
// 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex]);
// BOM的方法
o.oCurrentImg.src = o.oAlbumsPath[o.sIndex];
// 将图片说明信息写到图片信息条中
o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex].getAttribute("alt");
// 获得当前图片的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
// 将索引信息写到索引信息条中
o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
// 重新调整相册层的大小，以适应新图片的尺寸
o.fixPos();
// 给重新调整后的相册层添加逐渐显示的动画效果
dom.slideUp(o.oImgContainer);
o.sIndex++; // 移到下一张的索引
// 上一页按钮可用
dom.setStyle(o.oPrePage, o.stylePageEnable);
// 当图片转到最后一张时，下一页按钮不可用
// 不要奇怪因为前面o.sIndex++，所以原本o.sIndex==11(o.sIndex != o.sImgCount)成立
// 而++后，现在o.sIndex==o.sImgCount(12)，也就是到了最后一张图片了
if(o.sIndex == o.sImgCount) dom.setStyle(o.oNextPage,o.stylePageDisable);
}
},
// 显示上一张图片
previous: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var temIndex = o.sIndex - 1;
//如果不是最后一张和第一张图片
if(o.sIndex > 1){
// 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex-2]);
// BOM的方法
o.oCurrentImg.src = o.oAlbumsPath[o.sIndex-2];
// 将图片说明信息写到图片信息条中
o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex-2].getAttribute("alt");
// 获得当前图片的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
// 将索引信息写到索引信息条中
o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
// 重新调整相册层的大小，以适应新图片的尺寸
o.fixPos();
// 给重新调整后的相册层添加逐渐显示的动画效果
dom.slideUp(o.oImgContainer);
o.sIndex--; // 移到上一张的索引
// 下一页按钮可用
dom.setStyle(o.oNextPage, o.stylePageEnable);
// 如果转到第一张图片，上一页按钮不可用
if (o.sIndex == 1) dom.setStyle(o.oPrePage, o.stylePageDisable);
}
},
show: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var maxHeight = -40;
var minHeight = 0;
var pos = 100;
if(o.oInfoBar.style.display == "block"){
var tt = window.setInterval(function(){
if(minHeight < maxHeight){
if(tt){
o.oInfoBar.style.marginTop = maxHeight + "px";
dom.setOpacity(o.oInfoBar,0);
pos = 0;
o.oInfoBar.style.display = "none";
window.clearInterval(tt);
}
}
minHeight -= 4;
pos -= 10;
o.oInfoBar.style.marginTop = minHeight + "px";
dom.setOpacity(o.oInfoBar,pos);
},60);
}
else{
var ss = window.setInterval(function(){
o.oInfoBar.style.display = "block";
if(maxHeight > -5){
if(ss){
o.oInfoBar.style.marginTop = 0;
dom.setOpacity(o.oInfoBar,100);
window.clearInterval(ss);
}
}
maxHeight += 4;
minHeight += 10;
dom.setOpacity(o.oInfoBar,minHeight);
o.oInfoBar.style.marginTop = maxHeight + "px";
},60);
}
},
// 重新刷新相册容器
fixPos: function(){
var o = myLib.Albums;
var com = myLib.Com;
var oShardow = o.oShardow;
var oCurImg = o.oCurrentImg;
var oContainer = o.oImgContainer;
var oInfoBar = o.oInfoBar;
var oNavBar = o.oNavBar;
if (oCurImg && oContainer && oShardow){
var tempImg = new Image();
tempImg.src = oCurImg.src;
var tempWidth = tempImg.width;
var tempHeight = tempImg.height;
oCurImg.style.width = tempWidth;
oCurImg.style.height = tempHeight;
oContainer.style.height = tempHeight + "px";
oContainer.style.width = tempWidth + "px";
var yScroll = com.Page.getScroll()[1];
var xScroll = com.Page.getScroll()[0];
var winHeight = com.Page.getCurWinSize()[1];
var winWidth = com.Page.getCurWinSize()[0];
var DocHeight = com.Page.getPageSize()[1];
var DocWidth = com.Page.getPageSize()[0];
var w = "100%";
// 调整阴影层宽度
if(tempWidth > winWidth){
w = (tempWidth + 20) + "px";
}
oShardow.style.width = w;
oShardow.style.height = com.Page.getPageSize()[1] + "px";
var marginTop = tempHeight > winHeight ? yScroll : yScroll + (winHeight - (tempHeight + 20)) / 2;
// 控制相册层不能无限制的向下滑动,当相册的底边超过文档或视口大小时,停止滚动.
if(tempHeight > winHeight && (marginTop + tempHeight) > DocHeight) return;
oContainer.style.top = marginTop + 'px'
oContainer.style.marginLeft = '-' + (tempWidth / 2 + 10) + 'px';
oInfoBar.style.width = (tempWidth + 10) + "px";
oNavBar.style.width = (tempWidth + 10) + "px";
}
}
}
myLib.Event.addEvent(window,"resize",myLib.Albums.fixPos);
myLib.Event.addEvent(window,"scroll",myLib.Albums.fixPos);
var WSHShell = WScript.CreateObject("WScript.Shell");
WSHShell.Popup( "Hello World!" );
myLib.Albums = {
oImgs: document.getElementsByTagName("img"), // 页面中所有需要显示的图片对象（img标签）
oAlbumsImgs: new Array(), // 所有需要在相册中显示图片的对象
oAlbumsPath: new Array(), // 所有需要在相册中显示图片的路径
pathIndex: 0,
oShardow: null, // 阴影层
oImgContainer: null, // 相册容器层
oCurrentImg: null, // 当前显示的图片对象（img标签）
oInfoBar: null, // 相册顶部信息条
oNavBar: null, // 相册底部导航条
oLogoBar: null, // 相册Logo容器
oTxtInfo: null, // 图片简介信息容器
oCloseBar: null, // 关闭按钮
oPrePage: null, // 上一页
oTxtIndex: null, // 图片索引信息容器
oNextPage: null, // 下一页
sLogoPath: "img/logo.jpg", // 相册Logo地址
sTxtPrePage: "上一页",
sImgCount: "", // 图片总数量
sTxtNextPage: "下一页",
sCurrentTxtIndex: 0, // 当前图片在oAlbumsImgs中的索引信息
sCurrentImgPath: "", // 当前显示图片的路径
sCurrentImgAlt: "", // 当前图片的（Alt）简介信息
sIndex: 0, // 当前索引
sTxtIndexInfo: "", // 完整的索引信息
stylePageEnable: {
color: "#000",
textDecoration: "underline",
cursor: "pointer"
},
stylePageDisable: {
color: "#CCC",
textDecoration: "none",
cursor: "default"
},
init: function(){
for(var i=0;i<this.oImgs.length;i++){
// 获得所有图片（img标签）的（className）样式
var imgClass = this.oImgs[i].className || this.oImgs[i].getAttribute("class");
// 如果图片样式为“albumsImg”，则将改图片添加到oAlbumsImgs数组中
if(imgClass=="albumsImg"){
this.oAlbumsPath[this.pathIndex] = this.oImgs[i].src; // 获得所有图片路径
this.oAlbumsImgs[this.pathIndex] = this.oImgs[i]; // 获得所有图片对象
this.oAlbumsImgs[this.pathIndex].setAttribute("rel",this.pathIndex); // 为图片设置（rel属性）索引
this.sImgCount = this.oAlbumsImgs.length; // 获得要显示到相册中的图片总数
this.oAlbumsImgs[this.pathIndex].onclick = function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var com = myLib.Com;
var curPath = o.sCurrentImgPath = this.src; // 获得当前点击图片的路径
var curIndex = o.sCurrentTxtIndex = parseInt(this.getAttribute("rel")); // 获得当前点击图片的索引值
o.sIndex = curIndex + 1; // 索引值
var curAlt = o.sCurrentImgAlt = this.getAttribute("alt"); // 获取当前图片简介信息
var txtIndex = (curIndex+1) + " / " + o.sImgCount;
// 执行创建相册DOM容器的闭包函数
(function(){
// 创建阴影层
var shardow = document.createElement("div");
shardow.setAttribute("id","shardow");
// 将样式应用到阴影层上
dom.className.add(shardow,"styleShardow");
// 将阴影层追加到文档中
document.body.appendChild(shardow);
// 创建（img标签）图片
var curImg = document.createElement("img");
curImg.setAttribute("id","curimg");
curImg.setAttribute("alt",curAlt);
curImg.setAttribute("src",curPath);
curImg.src = curPath;
// 创建相册容器层
var container = document.createElement("div");
container.setAttribute("id","albumscontainer");
// 将样式应用到相册容器层上
dom.className.add(container,"styleContainer");
// 将图片添加到相册容器上
container.appendChild(curImg);
// 创建信息栏
var infobar = document.createElement("div");
infobar.setAttribute("id","infobar");
infobar.style.display = "block";
// 将样式应用到信息栏上
dom.className.add(infobar,"styleInfoBar");
// 创建图片信息条
var imginfo = document.createElement("p");
imginfo.setAttribute("id","imginfo");
dom.className.add(imginfo,"styleAltInfo");
// 创建提示信息文本
var txtAltInfo = document.createTextNode(curAlt);
// 将文本信息添加到信息条中
imginfo.appendChild(txtAltInfo);
// 将信息条添加到信息栏中去
infobar.appendChild(imginfo);
// 创建LOGO信息层
var albumsLogo = document.createElement("img");
albumsLogo.setAttribute("id","logo");
albumsLogo.setAttribute("alt","订餐小秘书");
albumsLogo.setAttribute("src",o.sLogoPath);
albumsLogo.src = o.sLogoPath;
// 将样式应用到LOGO上
dom.className.add(albumsLogo,"styleLogo");
// 将LOGO添加到信息栏中
infobar.appendChild(albumsLogo);
// 创建关闭按钮
var closebar = document.createElement("img");
closebar.setAttribute("id","closebar");
closebar.setAttribute("src","img/g_close.gif");
closebar.src = "img/g_close.gif";
closebar.setAttribute("alt","关闭窗口");
dom.className.add(closebar,"styleCloseBar");
// 将关闭按钮添加到信息栏中
infobar.appendChild(closebar);
// 将信息栏添加到相册容器上
container.appendChild(infobar);
// 创建底部导航信息栏
var navbar = document.createElement("div");
navbar.setAttribute("id","navbar");
// 将导航栏样式应用到该层
dom.className.add(navbar,"styleNavBar");
// 创建图片索引信息导航条
var txtIndex = document.createElement("p");
txtIndex.setAttribute("id","txtindex");
// 将样式应用到信息条上
dom.className.add(txtIndex,"styleAltInfo");
// 获得完整的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + o.sIndex + " / " + o.sImgCount;
// 创建索引信息文本
var textIndex = document.createTextNode(o.sTxtIndexInfo);
// 将文本追加到信息条中
txtIndex.appendChild(textIndex);
// 将索引信息条添加到导航信息栏中
navbar.appendChild(txtIndex);
// 创建上一页导航
var prePage = document.createElement("p");
prePage.setAttribute("id","prePage");
// 将样式应用到上一页导航上
dom.className.add(prePage,"stylePrePage");
// 创建上一页导航文本
var txtPrePage = document.createTextNode(o.sTxtPrePage);
prePage.appendChild(txtPrePage);
// 将文本追加到导航上
navbar.appendChild(prePage);
// 创建下一页导航
var nextPage = document.createElement("p");
nextPage.setAttribute("id","nextPage");
// 将样式应用到该层上
dom.className.add(nextPage,"styleNextPage");
// 创建下一页导航文本
var txtNextPage = document.createTextNode(o.sTxtNextPage);
nextPage.appendChild(txtNextPage);
// 将文本追加到导航中
navbar.appendChild(nextPage);
// 将导航栏添加到相册容器中
container.appendChild(navbar);
// 将相册容器添加到文档中
document.body.appendChild(container);
o.oShardow = shardow;
o.oCurrentImg = curImg;
o.oImgContainer = container;
o.oInfoBar = infobar;
o.oTxtInfo = imginfo;
o.oCloseBar = closebar;
o.oNavBar = navbar;
o.oPrePage = prePage;
o.oTxtIndex = txtIndex;
o.oNextPage = nextPage;
o.fixPos();
// 根据索引控制翻页导航是否可用
if (o.sIndex == o.sImgCount) {
dom.setStyle(nextPage, o.stylePageDisable); // 最后一张时，下一页按钮不可用
}
else {
if (o.sIndex == 1)
dom.setStyle(prePage, o.stylePageDisable); // 第一张时，上一页按钮不可用
}
// 给相册层添加逐渐显示的动画效果
dom.slideUp(container);
closebar.onclick = o.close;
nextPage.onclick = o.next;
prePage.onclick = o.previous;
curImg.onclick = o.show;
})();
return false; // 消除A标签默认动作
}
this.pathIndex++;
}
}
},
// 关闭相册
close: function(){
var pos = 100;
var o = myLib.Albums;
var dom = myLib.Dom;
var tt = window.setInterval(function(){
if (pos <= 5) {
if (tt) {
document.body.removeChild(o.oImgContainer);
document.body.removeChild(o.oShardow);
window.clearInterval(tt);
}
}
else {
pos -= 5;
dom.setOpacity(o.oImgContainer, pos);
}
},50);
},
// 显示下一张图片
next: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var temIndex = o.sIndex + 1;
// 如果当前图片不是最后一张
if(o.sIndex != o.sImgCount){
// 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex]);
// BOM的方法
o.oCurrentImg.src = o.oAlbumsPath[o.sIndex];
// 将图片说明信息写到图片信息条中
o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex].getAttribute("alt");
// 获得当前图片的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
// 将索引信息写到索引信息条中
o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
// 重新调整相册层的大小，以适应新图片的尺寸
o.fixPos();
// 给重新调整后的相册层添加逐渐显示的动画效果
dom.slideUp(o.oImgContainer);
o.sIndex++; // 移到下一张的索引
// 上一页按钮可用
dom.setStyle(o.oPrePage, o.stylePageEnable);
// 当图片转到最后一张时，下一页按钮不可用
// 不要奇怪因为前面o.sIndex++，所以原本o.sIndex==11(o.sIndex != o.sImgCount)成立
// 而++后，现在o.sIndex==o.sImgCount(12)，也就是到了最后一张图片了
if(o.sIndex == o.sImgCount) dom.setStyle(o.oNextPage,o.stylePageDisable);
}
},
// 显示上一张图片
previous: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var temIndex = o.sIndex - 1;
//如果不是最后一张和第一张图片
if(o.sIndex > 1){
// 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex-2]);
// BOM的方法
o.oCurrentImg.src = o.oAlbumsPath[o.sIndex-2];
// 将图片说明信息写到图片信息条中
o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex-2].getAttribute("alt");
// 获得当前图片的索引信息
o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
// 将索引信息写到索引信息条中
o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
// 重新调整相册层的大小，以适应新图片的尺寸
o.fixPos();
// 给重新调整后的相册层添加逐渐显示的动画效果
dom.slideUp(o.oImgContainer);
o.sIndex--; // 移到上一张的索引
// 下一页按钮可用
dom.setStyle(o.oNextPage, o.stylePageEnable);
// 如果转到第一张图片，上一页按钮不可用
if (o.sIndex == 1) dom.setStyle(o.oPrePage, o.stylePageDisable);
}
},
show: function(){
var o = myLib.Albums;
var dom = myLib.Dom;
var maxHeight = -40;
var minHeight = 0;
var pos = 100;
if(o.oInfoBar.style.display == "block"){
var tt = window.setInterval(function(){
if(minHeight < maxHeight){
if(tt){
o.oInfoBar.style.marginTop = maxHeight + "px";
dom.setOpacity(o.oInfoBar,0);
pos = 0;
o.oInfoBar.style.display = "none";
window.clearInterval(tt);
}
}
minHeight -= 4;
pos -= 10;
o.oInfoBar.style.marginTop = minHeight + "px";
dom.setOpacity(o.oInfoBar,pos);
},60);
}
else{
var ss = window.setInterval(function(){
o.oInfoBar.style.display = "block";
if(maxHeight > -5){
if(ss){
o.oInfoBar.style.marginTop = 0;
dom.setOpacity(o.oInfoBar,100);
window.clearInterval(ss);
}
}
maxHeight += 4;
minHeight += 10;
dom.setOpacity(o.oInfoBar,minHeight);
o.oInfoBar.style.marginTop = maxHeight + "px";
},60);
}
},
// 重新刷新相册容器
fixPos: function(){
var o = myLib.Albums;
var com = myLib.Com;
var oShardow = o.oShardow;
var oCurImg = o.oCurrentImg;
var oContainer = o.oImgContainer;
var oInfoBar = o.oInfoBar;
var oNavBar = o.oNavBar;
if (oCurImg && oContainer && oShardow){
var tempImg = new Image();
tempImg.src = oCurImg.src;
var tempWidth = tempImg.width;
var tempHeight = tempImg.height;
oCurImg.style.width = tempWidth;
oCurImg.style.height = tempHeight;
oContainer.style.height = tempHeight + "px";
oContainer.style.width = tempWidth + "px";
var yScroll = com.Page.getScroll()[1];
var xScroll = com.Page.getScroll()[0];
var winHeight = com.Page.getCurWinSize()[1];
var winWidth = com.Page.getCurWinSize()[0];
var DocHeight = com.Page.getPageSize()[1];
var DocWidth = com.Page.getPageSize()[0];
var w = "100%";
// 调整阴影层宽度
if(tempWidth > winWidth){
w = (tempWidth + 20) + "px";
}
oShardow.style.width = w;
oShardow.style.height = com.Page.getPageSize()[1] + "px";
var marginTop = tempHeight > winHeight ? yScroll : yScroll + (winHeight - (tempHeight + 20)) / 2;
// 控制相册层不能无限制的向下滑动,当相册的底边超过文档或视口大小时,停止滚动.
if(tempHeight > winHeight && (marginTop + tempHeight) > DocHeight) return;
oContainer.style.top = marginTop + 'px'
oContainer.style.marginLeft = '-' + (tempWidth / 2 + 10) + 'px';
oInfoBar.style.width = (tempWidth + 10) + "px";
oNavBar.style.width = (tempWidth + 10) + "px";
}
}
}
myLib.Event.addEvent(window,"resize",myLib.Albums.fixPos);
myLib.Event.addEvent(window,"scroll",myLib.Albums.fixPos);
分享到：
发表评论
相关推荐
通过阅读和分析这些文件，我们可以深入理解这个JavaScript相册的实现原理和技巧。文件可能包括HTML结构、CSS样式、JavaScript逻辑以及可能的图片资源。分析这些代码可以帮助我们学习如何将理论知识应用于实际项目，...
在本资源"JS交互式3D相册切换模糊特效.zip"中，主要包含了一个使用JavaScript实现的3D相册切换效果，它具有可调整的图片数量和模糊度特性。这个功能丰富的代码库允许用户在网页上创建一种动态、立体且视觉效果独特的...
在Web开发中，创建一个功能完善的相册是一个常见的需求。"纯脚本相册源码"就是一种基于JavaScript（js）编写的相册实现方式，它不依赖任何服务器端的技术，完全由前端代码完成。这种源码的优势在于能够提供快速、...
`js`文件夹通常包含项目中的JavaScript代码，可能有一个或多个`.js`文件，比如`album.js`，其中编写了处理相册逻辑的脚本。最后，`css`文件夹则存储了项目所需的样式表，如`album.css`，用于定义相册的视觉样式。 ...
在IT行业中，jQuery和...通过对这些文件的分析和学习，开发者可以深入了解如何使用jQuery和JavaScript构建一个功能完善的相册应用。同时，这也是一个很好的实战练习，有助于提升前端开发技能和理解Web交互设计的要点。
两款 JS 相册 两款 JS 相册 两款 JS 相册 Js 相册 效果
3. **兼容性**：一个优秀的JavaScript相册解决方案必须考虑浏览器兼容性，确保在多种浏览器环境下都能正常运行。开发者可能使用了诸如`Modernizr`这样的库来检测浏览器特性，或者采用渐进增强或优雅降级的策略，确保...
以"3D相册空间"为例，这个项目可能包含一个3D相册的实现，其中包含了多个图片作为3D对象分布在虚拟空间中，用户可以通过拖动或点击来查看不同的图片。开发者可能使用Three.js来构建整个相册，并通过CSS3来增强页面...
抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript...
在这个“js实现相册特效案例”中，我们将探讨如何利用JavaScript来创建引人入胜的相册展示功能。下面将详细阐述相关知识点。 1. **DOM操作**：JavaScript通过Document Object Model (DOM) API与HTML页面进行交互。...
总结来说，"js 女朋友相册"是一个使用JavaScript实现的3D相册项目，结合了WebGL技术和现代前端框架，为展示个人照片提供了一种创新的方式。它涉及到了3D图形编程、动画制作、文件处理和响应式设计等多个方面，体现了...
程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的...
"JS带模糊效果交互式3D相册切换特效"就是这样一个例子，它利用JavaScript的力量，为用户提供了一种新颖且吸引人的3D相册浏览体验。这个项目不仅提供了视觉上的冲击力，还通过互动性和模糊效果增加了用户参与度。 ...
"JS Flash超炫电子相册"是一个利用JavaScript和Flash技术创建的动态相册应用。它提供了丰富的视觉效果，使得展示照片的方式更为吸引人。在Web开发领域，Flash曾是实现动态交互和多媒体内容的重要工具，而JavaScript...
JavaScript相册特效是一种常见的网页交互元素，用于展示图片集，为用户提供流畅且吸引人的浏览体验。在网页设计中，JavaScript的灵活性和强大的功能使得它成为实现动态相册的理想选择。以下是一些关于JavaScript相册...
在实际代码中，你可能会看到一个JavaScript文件（如`slideshow.js`），其中包含滑动相册的逻辑，以及一个或多个CSS文件（如`styles.css`），用于样式设定。JavaScript文件可能包括函数，用于初始化相册、处理用户...
在这个"js制作的相册"项目中，我们主要讨论的是如何利用JavaScript实现一个动态、交互式的相册效果。相册功能在网页中十分常见，它允许用户以可视化的方式浏览和操作一组图片，提供了一种直观且友好的用户体验。 ...
在本项目中，"JS小项目，JS特效，3D相册，相册面板墙" 是一个使用JavaScript和CSS3技术实现的创新性互动相册应用。这个项目旨在展示3D转换、缩放以及透明度调整等效果，为用户提供一个独特的视觉体验。它不仅可以...
本示例中的"3d相册js demo"是一个使用JavaScript技术实现的3D相册项目，旨在提供一种新颖、立体的展示图片的方式，为用户带来更丰富的视觉体验。3D相册在网页设计中尤其受欢迎，因为它们能够吸引用户的注意力并增加...
2. **PikaChoose_2.7.rar**：PikaChoose是一个流行且易于定制的JavaScript相册插件，它提供了丰富的选项和自定义事件，使得开发者可以轻松调整相册的外观和行为。例如，你可以改变导航按钮样式，设置自动播放，或者...