[原创]一个简单的相册效果，简单但兼容性好。
之前就写好了这个小程序，不过之前在向上翻页的时候有BUG，今天休正了，并且简单的封装了一下，不过动画的效果还不是那么眩。但是个人觉得已经够用了，而且兼容性还不错，我在Windows下的FF2。0~3。0，IE 6.0~8.0,Opera9.x,Netscape8.1和safari3.1都测试通过了。其实这个程序只是对上次讲的lightbox效果的一个更复杂些的扩展应用，基本的理论和大家可以查看《[url=http://www.yaohaixiao.com/article.asp?id=195]Javascript DOM 编程实例讲解--仿LightBox效果提示框[/url]》，还有，如果程序有什么地方需要改进的，或者大家有添加了其他的动画效果，也请大家告告诉我。
呵呵，没有其他更多要说的了，脚本里的注释说得应该是很详细了。
演示地址:[url]http://www.yaohaixiao.com/code/albums/index.html[/url]
脚本代码：
[code]
/**
* @author robert
*/
var Albums = {
oImgs: document.getElementsByTagName("img"), // 页面中所有需要显示的图片对象（img标签）
oAlbumsImgs: new Array(), // 所有需要在相册中显示图片的对象
oAlbumsPath: new Array(), // 所有需要在相册中显示图片的路径
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: "", // 完整的索引信息
// 阴影层样式
styleShardow: {
height: '100%',
width: '100%',
opacity: .4,
filter: 'alpha(opacity=40)',
position: 'absolute',
backgroundColor: '#000',
top: '0',
left: '0',
zIndex: 10
},
// 相册容器样式
styleContainer: {
position: 'absolute',
border: '5px solid #777',
left: '50%',
top: '50%',
opacity: .1,
filter: 'alpha(opacity=10)',
padding: '5px',
background: '#F5F5FE',
zIndex: 11
},
// 信息栏样式
styleInfoBar: {
position: 'absolute',
top: '0',
left: '0',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
backgroundColor: '#FFF',
color: '#000',
textAlign: 'center',
overflow: 'hidden',
fontWeight: 'bold'
},
// 导航栏样式
styleNavBar: {
position: 'absolute',
bottom: '0',
left: '0',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
backgroundColor: '#FFF',
color: '#000',
textAlign: 'center',
overflow: 'hidden',
fontWeight: 'bold'
},
// 图片信息说明样式
styleAltInfo: {
margin: '0 auto',
width: '100%',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
fontWeight: 'bold',
overflow: 'hidden'
},
// 相册LOGO样式
styleLogo: {
position: 'absolute',
width: '100px',
height: '30px',
top: '5px',
left: '5px'
},
// 关闭按钮样式
styleCloseBar: {
position: 'absolute',
top: '9px',
right: '12px',
cursor: 'pointer',
width: '66px',
height: '22px'
},
// 上一页样式
stylePrePage: {
position: 'absolute',
top: '0',
left: '0',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
backgroundColor: '#FFF',
color: '#000',
textAlign: 'center',
overflow: 'hidden',
fontWeight: 'bold',
zIndex: 99,
width: '70px',
textDecoration: 'underline',
cursor: 'pointer'
},
// 下一页样式
styleNextPage: {
position: 'absolute',
top: '0',
right: '0',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
backgroundColor: '#FFF',
color: '#000',
textAlign: 'center',
overflow: 'hidden',
fontWeight: 'bold',
zIndex: 99,
width: '70px',
textDecoration: 'underline',
cursor: 'pointer'
},
// 可用的样式
stylePageEnable: {
color: '#000',
textDecoration: 'underline',
cursor: 'pointer'
},
// 不可用的样式
stylePageDisable: {
cursor: 'default',
color: '#CCC',
textDecoration: 'none'
},
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[i] = this.oImgs[i].src; // 获得所有图片路径
this.oAlbumsImgs[i] = this.oImgs[i]; // 获得所有图片对象
this.oAlbumsImgs[i].setAttribute("rel",i); // 为图片设置（rel属性）索引
this.sImgCount = this.oAlbumsImgs.length; // 获得要显示到相册中的图片总数
this.oAlbumsImgs[i].onclick = function(){
var o = Albums;
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;
var objImg = new Image(); // 创建Image对象
objImg.src = curPath; // 给Image对象设置路径（从而获得图片的宽和高）
var curImgWidth = objImg.width; // 获得当前图片宽
var curImgHeight = objImg.height; // 获得当前图片高
// 执行创建相册DOM容器的闭包函数
(function(){
// 创建阴影层
var shardow = document.createElement("div");
shardow.setAttribute("id","shardow");
// 将样式应用到阴影层上
o.setStyle(shardow,o.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","container");
container.style.margin = '-' + (curImgHeight/2+10) + 'px 0 0 -' + (curImgWidth/2+10) + 'px';
// 将样式应用到相册容器层上
o.setStyle(container,o.styleContainer);
// 将图片添加到相册容器上
container.appendChild(curImg);
// 创建信息栏
var infobar = document.createElement("div");
infobar.setAttribute("id","infobar");
infobar.style.width = (curImgWidth + 10) + "px";
// 将样式应用到信息栏上
o.setStyle(infobar,o.styleInfoBar);
// 创建图片信息条
var imginfo = document.createElement("p");
imginfo.setAttribute("id","imginfo");
o.setStyle(imginfo,o.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上
o.setStyle(albumsLogo,o.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","关闭窗口");
o.setStyle(closebar,o.styleCloseBar);
// 将关闭按钮添加到信息栏中
infobar.appendChild(closebar);
// 将信息栏添加到相册容器上
container.appendChild(infobar);
// 创建底部导航信息栏
var navbar = document.createElement("div");
navbar.setAttribute("id","navbar");
navbar.style.width = (curImgWidth + 10) + "px";
// 将导航栏样式应用到该层
o.setStyle(navbar,o.styleNavBar);
// 创建图片索引信息导航条
var txtIndex = document.createElement("p");
txtIndex.setAttribute("id","txtindex");
// 将样式应用到信息条上
o.setStyle(txtIndex,o.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");
// 将样式应用到上一页导航上
o.setStyle(prePage,o.stylePrePage);
// 创建上一页导航文本
var txtPrePage = document.createTextNode(o.sTxtPrePage);
prePage.appendChild(txtPrePage);
// 将文本追加到导航上
navbar.appendChild(prePage);
// 创建下一页导航
var nextPage = document.createElement("p");
nextPage.setAttribute("id","nextPage");
// 将样式应用到该层上
o.setStyle(nextPage,o.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;
// 根据索引控制翻页导航是否可用
if (o.sIndex == o.sImgCount) {
o.setStyle(nextPage, o.stylePageDisable); // 最后一张时，下一页按钮不可用
}
else {
if (o.sIndex == 1)
o.setStyle(prePage, o.stylePageDisable); // 第一张时，上一页按钮不可用
}
// 给相册层添加逐渐显示的动画效果
o.slideUp(container);
closebar.onclick = o.close;
nextPage.onclick = o.next;
prePage.onclick = o.previous;
})();
return false; // 消除A标签默认动作
}
}
}
},
// 关闭相册
close: function(){
var pos = 100;
var o = Albums;
var slide = function(){
if(pos <= 5){
if(tt) window.clearInterval(tt);
document.body.removeChild(o.oImgContainer);
document.body.removeChild(o.oShardow);
}
else{
pos -= 5;
o.setOpacity(o.oImgContainer,pos);
}
}
var tt = window.setInterval(slide,50);
},
// 显示下一张图片
next: function(){
var o = Albums;
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.resize(o.oCurrentImg,o.oImgContainer,o.oInfoBar,o.oNavBar);
// 给重新调整后的相册层添加逐渐显示的动画效果
o.slideUp(o.oImgContainer);
o.sIndex++; // 移到下一张的索引
// 上一页按钮可用
o.setStyle(o.oPrePage, o.stylePageEnable);
// 当图片转到最后一张时，下一页按钮不可用
// 不要奇怪因为前面o.sIndex++，所以原本o.sIndex==11(o.sIndex != o.sImgCount)成立
// 而++后，现在o.sIndex==o.sImgCount(12)，也就是到了最后一张图片了
if(o.sIndex == o.sImgCount) o.setStyle(o.oNextPage,o.stylePageDisable);
}
},
// 显示上一张图片
previous: function(){
var o = Albums;
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.resize(o.oCurrentImg,o.oImgContainer,o.oInfoBar,o.oNavBar);
// 给重新调整后的相册层添加逐渐显示的动画效果
o.slideUp(o.oImgContainer);
o.sIndex--; // 移到上一张的索引
// 下一页按钮可用
o.setStyle(o.oNextPage, o.stylePageEnable);
// 如果转到第一张图片，上一页按钮不可用
if (o.sIndex == 1) o.setStyle(o.oPrePage, o.stylePageDisable);
}
},
// 重新刷新相册容器
resize: function(oCurImg,oContainer,oInfoBar,oNavBar){
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";
oContainer.style.margin = '-' + (tempHeight/2+10) + 'px 0 0 -' + (tempWidth/2+10) + 'px';
oInfoBar.style.width = (tempWidth + 10) + "px";
oNavBar.style.width = (tempWidth + 10) + "px";
},
// 设置元素样式
setStyle: function(elem,prop){
var old = {};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i] = prop[i];
}
return old;
},
// 通过在短时间内增加透明度逐步显示隐藏元素的函数
slideUp: function(elem){
// 从0透明度开始滑动
this.setOpacity(elem,0);
// 我们在1秒钟内执行一个20帧的动画
for(var i=0;i<=100;i+=5){
// 保证我们能够保持正确的'i'的闭包函数
(function(){
var pos = i;
var o = Albums;
// 设置 setTimeout 以让它能够在指定点运行
setTimeout(function(){
// 设置元素的透明
o.setOpacity(elem,pos);
},(pos + 1) * 10);
})();
}
},
// 设置元素透明度(级别从0~100)
setOpacity: function(elem,level){
// 如果是IE,所以设置元素的Alpha滤镜
if(elem.style.filter && document.all && !window.opera){
elem.style.filter = "alpha(opacity=" + level + ")";
}
else{
// 否则,使用W3C的opacity属性
elem.style.opacity = level/100;
}
}
}
[/code]
[[i] 本帖最后由 yaohaixiao 于 2008-7-31 15:44 编辑 [/i]]
页面代码:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="haixiao_yao@yahoo.com.cn" />
<meta name="Copyright" content="Yaohaixiao CopyRight 2008" />
<title>凌泷阁餐厅相册</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
text-align:center;
background-color:#FFF;
color:#000;
font:normal 12px Arial,sans-serif;
}
body{
height:100%;
}
a:link,
a:visited{
color:#999;
text-decoration:underline;
}
a:hover{
color:#DE0000;
text-decoration:none;
}
h1{
margin:0 auto;
width:720px;
height:60px;
font-size:24px;
color:#DE0000;
letter-spacing:2px;
line-height:60px;
}
#alums{
margin:0 auto;
margin-top:10px;
border:5px solid #CC3300;
background-color:#FFF;
padding:5px;
width:700px;
height:433px;
overflow:auto;
}
#alums ul{
float:left;
height:auto;
width:700px;
height:433px;
overflow:hidden;
}
#alums ul li{
float:left;
width:175px;
height:136px;
margin-top:5px;
overflow:hidden;
}
#alums ul li img{
width:163px;
height:112px;
border:1px solid #DE0000;
padding:1px;
}
#alums ul li a:link,
#alums ul li a:visited,
#alums ul li a:hover{
display:block;
line-height:22px;
}
#alums ul li a:link img,
#alums ul li a:visited img{
border:1px solid #999;
}
#alums ul li a:hover img{
border:1px solid #DE0000;
}
-->
</style>
<script language="javascript" type="text/javascript" src="js/myAlbums.js"></script>
</head>
<body>
<h1>凌泷阁餐厅相册</h1>
<div id="alums">
<ul id="imglist">
<li><a href="img/pics/1.jpg"><img src="img/pics/1.jpg" class="albumsImg" alt="包房过道" /></a><a href="img/pics/1.jpg">凌泷阁-包房过道</a></li>
<li><a href="img/pics/2.jpg"><img src="img/pics/2.jpg" class="albumsImg" alt="包房环境" /></a><a href="img/pics/2.jpg">凌泷阁-包房环境</a></li>
<li><a href="img/pics/3.jpg"><img src="img/pics/3.jpg" class="albumsImg" alt="餐厅环境" /></a><a href="img/pics/3.jpg">凌泷阁-餐厅环境</a></li>
<li><a href="img/pics/4.jpg"><img src="img/pics/4.jpg" class="albumsImg" alt="餐厅特色" /></a><a href="img/pics/4.jpg">凌泷阁-餐厅特色</a></li>
<li><a href="img/pics/5.jpg"><img src="img/pics/5.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="img/pics/5.jpg">凌泷阁-餐厅迎宾</a></li>
<li><a href="img/pics/6.jpg"><img src="img/pics/6.jpg" class="albumsImg" alt="大包房" /></a><a href="img/pics/6.jpg">凌泷阁-大包房</a></li>
<li><a href="img/pics/7.jpg"><img src="img/pics/7.jpg" class="albumsImg" alt="过道环境" /></a><a href="img/pics/7.jpg">凌泷阁-过道环境</a></li>
<li><a href="img/pics/8.jpg"><img src="img/pics/8.jpg" class="albumsImg" alt="小包房" /></a><a href="img/pics/8.jpg">凌泷阁-小包房</a></li>
<li><a href="img/pics/9.jpg"><img src="img/pics/9.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="img/pics/9.jpg">凌泷阁-餐厅迎宾</a></li>
<li><a href="img/pics/10.jpg"><img src="img/pics/10.jpg" class="albumsImg" alt="大包房" /></a><a href="img/pics/10.jpg">凌泷阁-大包房</a></li>
<li><a href="img/pics/11.jpg"><img src="img/pics/11.jpg" class="albumsImg" alt="过道环境" /></a><a href="img/pics/11.jpg">凌泷阁-过道环境</a></li>
<li><a href="img/pics/12.jpg"><img src="img/pics/12.jpg" class="albumsImg" alt="小包房" /></a><a href="img/pics/12.jpg">凌泷阁-小包房</a></li>
</ul>
</div>
<script language="javascript" type="text/javascript">
<!--
Albums.init();
//-->
</script>
</body>
</html>
[/code] 有问题；点下一页什么都没有了；一篇黑
回复 yxljames 在 3# 的帖子
在什么浏览器下面看的效果啊，我都测试过的啊，还有，是不是在图片还没有全部加载完的时候就点了下一张啊？ 不行``有问题`
海哥好像还有点问题呢
海哥好像还有点问题要修正一下,效果不错 不错，我用ie7没有问题
谢谢楼主，收藏了:D 优化的不怎么好哦.... IE6下定位都有问题
回复 perfmlin 在 9# 的帖子
是啊，IE6定位有点问题，我要再调整下 好多CSS没有必要非得放进JS中吧？表现 和 什么什么 分离来着
:cool:
回复 fonqing 在 11# 的帖子
呵呵，现在样式应该调整好了，是因为我的样式应用错了，然后重新用脚本来调整了resize后的信息条宽度。至于上面说的我完全同意，呵呵，由于样式不是很多，我就干脆写到脚本里了，这么写虽然文件体积大些，呵呵，但是不用在到页面里添加<link/>标签了啊。 其实这个到不是最主要的目的，这里也是这么写是想告诉大家可以用这么一个方法来直接通过脚本设置样式，有的时候这么处理，是会有好处的。
[[i] 本帖最后由 yaohaixiao 于 2008-7-31 16:00 编辑 [/i]]
呵呵，如果有朋友有兴趣优化效果，就麻烦跟到下面
先谢谢了！ [quote]原帖由 [i]perfmlin[/i] 于 2008-7-31 14:57 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4138501&ptid=2876285][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]IE6下定位都有问题 [/quote]
情况一下。
回复 jiaxueq 在 14# 的帖子
还有？我再看看，哎，我在IE6里测试了啊，对了，由于没有做对图片未加载完成的处理工作，可能在图片未完全加载完的情况下，会有问题，你可以说清楚点，是什么问题吗？
毕竟我一个人测试，会忽略些情况和不同的网络环境会出现的图片加载慢的问题。
回复 jiaxueq 在 14# 的帖子
我反复地在IE6里测试了下，没有现在我这里是没有什么问题了，不知道你那里看到的是什么问题呢？回复 yaohaixiao 在 16# 的帖子
修复了BUG了，而且又添家了新的效果，就是点图片，隐藏显示信息栏，可以看到更宽的图片，然后又家了定位的功能，如果在很长的页面里，保证相册基本能够现在到当前屏幕的中间。而作到这点，则使用了以下函数[code]
getPageScroll: function(){
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
// Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
return new Array(xScroll,yScroll);
},
getPageHeight: function(){
var windowHeight
if (self.innerHeight) {
// all except Explorer
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowHeight = document.body.clientHeight;
}
return windowHeight
}
[/code]
注释中也说明了是针对不同的浏览器做了定位的兼容处理。
效果如图：
[attach]96155[/attach]
[[i] 本帖最后由 yaohaixiao 于 2008-8-1 17:17 编辑 [/i]] 要是能有个后台添加和定义的就更好了
呵呵，现在还没有时间做应用开发啊
现在只是做程序的优化和完善，等版本稳定了，我也许会做应用的开发DEMO，你其实可以知己做一个啊，我这里都详细的注释了啊。今天又更新了优化了代码：
1、把CSS分离出来了。
2、分离了全局的代码和相册插件的代码（代码如下[都是整理的常用的代码，应该对大家的开发还是有帮助的，以后会不断更新]：）
myLib.js
[code]
/**
* @author Yaohaixiao
*/
if(typeof myLib == "undefined"){
var myLib = {
Version: "1.0.0.1 Beta",
Author: "Yaohaixiao",
Browser: {
IE: !!(window.attachEvent && !window.opera),
Opera: !!window.opera,
WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
Moz: navigator.userAgent.indexOf('Mozilla/5.') > -1,
Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
Safari: navigator.userAgent.indexOf('Safari') > -1,
MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
},
ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>'
};
}
myLib.Com = {
// 判断变量是否定义
isUndefined: function(variable){
return typeof variable == 'undefined' ? true : false;
},
// 检测是否为时间格式，如果是则显示2008-2-25 19:24:34样式时间
chkFullTime: function(str){
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = str.match(reg);
if(r==null)return false;
var d= new Date(r[1],r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
},
// 不停变换的时间
Time: function(){
// Set the text to display before the clock:
var mypre_text = "当前时间：";
// Display the time in 24 or 12 hour time?
// 0 = 24, 1 = 12
var my12_hour = 1;
// How often do you want the clock updated?
// 0 = Never, 1 = Every Second, 2 = Every Minute
// If you pick 0 or 2, the seconds will not be displayed
var myupdate = 1;
// Display the date?
// 0 = No, 1 = Yes
var DisplayDate = 1;
// Global varibale definitions:
var dn="";
// The following arrays contain data which is used in the clock's
// date function. Feel free to change values for Days and Months
// if needed (if you wanted abbreviated names for example).
var DaysOfWeek = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var MonthsOfYear = ["1","2","3","4","5","6","7","8","9","10","11","12"];
// This array controls how often the clock is updated,
// based on your selection in the configuration.
var ClockUpdate = [0,1000,60000];
// Get all our date variables:
var Digital = new Date();
var year = Digital.getYear();
var day = Digital.getDay();
var mday = Digital.getDate();
var month = Digital.getMonth();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
// Set up the hours for either 24 or 12 hour display:
if(my12_hour){
dn = "AM";
if (hours > 12) { dn = "PM"; hours = hours - 12; }
if (hours == 0) { hours = 12; }
}
else{dn = "";}
if (minutes <= 9) { minutes = "0"+minutes; }
if (seconds <= 9) { seconds = "0"+seconds; }
if (year < 1000) {year += 1900; }
// This is the actual HTML of the clock. If you're going to play around
// with this, be careful to keep all your quotations in tact.
myclock = '';
myclock += mypre_text;
myclock += hours+':'+minutes;
if ((myupdate < 2) || (myupdate == 0)) { myclock += ':'+seconds; }
myclock += ' '+dn;
if (DisplayDate){ myclock += ' ' + year + '年' + MonthsOfYear[month] + '月'+mday+'日' + ' ' + DaysOfWeek[day]; }
if(!$("datetime")) return false;
$("datetime").innerHTML = myclock;
if(myupdate != 0){
window.setTimeout("myLib.Com.Time()",ClockUpdate[myupdate]);
}
},
popWin: function(url,title,width,height){
var w = 1024;
var h = 768;
if (document.all || document.layers){
w = screen.availWidth;
h = screen.availHeight;
}
var leftPos = (w/2-width/2);
var topPos = (h/2.3-height/2.3);
window.open(url,title,"width="+width+",height="+height+",top="+topPos+",left="+leftPos+",scrollbars=no,resizable=no,status=no");
},
// 重置whichForm表单下的input的内容
resetForm:function(whichForm){
if(!whichForm) return false;
for(var i=0;i<whichForm.elements.length;i++){
var element = whichForm.elements[i];
if(!element.defaultValue || element.type == "submit" || element.type == "button" || element.type == "reset") continue;
element.onfocus = function(){
if(this.value==this.defaultValue){
this.style.backgroundColor="#F8F8F8";
this.value = "";
}
}
element.onblur = function(){
if(this.value==""){
this.style.backgroundColor="#FFF";
this.value = this.defaultValue;
}
}
}
},
// 取得url中参数值
getParameter: function (varName){
var query = window.location.search;
if (query != null || query != ""){
query = query.replace(/^\?+/, "");
var qArray = query.split("&");
var len = qArray.length;
if (len > 0){
for (var i=0; i<len; i++){
var sArray = qArray[i].split("=", 2);
if (sArray[0] && sArray[1] && sArray[0] == varName){
return unescape(sArray[1]);
}
}
}
}
return null;
},
// 获得文档高度
getPageScroll: function(){
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
// Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
return [xScroll,yScroll];
},
getPageSize: function(){
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
return [windowWidth,windowHeight];
},
// url编码
urlEncode: function(str){
return encodeURIComponent(str);
},
// url解码
urlDecode: function (str){
return decodeURIComponent(str);
}
}
// 让Mozilla支持innerText
try{
HTMLElement.prototype.__defineGetter__
(
"innerText",
function (){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++){
if(childS[i].nodeType==1)
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
}
catch(e){}
// 获取DOM节点
function $(i){
if(!document.getElementById)return false;
if(typeof i==="string"){
if(document.getElementById && document.getElementById(i)) {// W3C DOM
return document.getElementById(i);
}
else if (document.all && document.all(i)) {// MSIE 4 DOM
return document.all(i);
}
else if (document.layers && document.layers[i]) {// NN 4 DOM.. note: this won't find nested layers
return document.layers[i];
}
else {
return false;
}
}
else{return i;}
}
myLib.Dom = {
// 给DOM节点添加class样式
addClass: function(element,value){
if(!element.className){
element.className = value;
}
else{
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
},
// 获取element节点的X坐标
getX: function(element){
var positionX = 0;
while(element != null){
positionX += element.offsetLeft;
element = element.offsetParent;
}
return positionX;
},
// 获取element节点的X坐标
getY: function(element){
var positionY = 0;
while(element != null){
positionY += element.offsetTop;
element = element.offsetParent;
}
return positionY;
},
// 获取element节点的宽
getWidth: function (element){
return element.offsetWidth;
},
// 获取element节点的高
getHeight: function (element){
return element.offsetHeight;
},
// 取得一个元素的text
getText: function (element){
if (typeof element.innerText != "undefined") return element.innerText;
if (typeof element.textContent != "undefined") return element.textContent;
return null;
},
// 设置element元素的text
setText: function (element, text){
if (typeof element.innerText != "undefined"){
element.innerText = text;
return true;
}
if (typeof element.textContent != "undefined"){
element.textContent = text;
return true;
}
return false;
},
// 取得element元素的innerHTML
getHTML: function (element){
return element.innerHTML;
},
// 设置element元素的innerHTML
setHTML: function (element, html){
element.innerHTML = html;
return true;
},
// 获取el节点内tag标签样式为name样式索引为size的DOM节点
getElByClassName:function(tag,name,size,el){
if(!document.getElementsByTagName) return false;
var el=(el)?el:document;
var itm=el.getElementsByTagName(tag);
var num=1;
for(i=0;i<itm.length;i++){
if(itm[i].className===name&&size===num){
return itm[i];
}
else if(itm[i].className===name){
num++;
}
}
return false;
},
// 在targetElement节点后面插入newElement节点
insertAfter:function(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
},
// 设置元素样式
setStyle: function(elem,prop){
var old = {};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i] = prop[i];
}
return old;
},
// 通过在短时间内增加透明度逐步显示隐藏元素的函数
slideUp: function(elem){
// 从0透明度开始滑动
this.setOpacity(elem,0);
// 我们在1秒钟内执行一个20帧的动画
for(var i=0;i<=100;i+=5){
// 保证我们能够保持正确的'i'的闭包函数
(function(){
var pos = i;
// 设置 setTimeout 以让它能够在指定点运行
setTimeout(function(){
// 设置元素的透明
myLib.Dom.setOpacity(elem,pos);
},(pos + 1) * 10);
})();
}
},
// 设置元素透明度(级别从0~100)
setOpacity: function(elem,level){
// 如果是IE,所以设置元素的Alpha滤镜
if(myLib.Browser.IE){
elem.style.filter = "alpha(opacity=" + level + ")";
}
else{
// 否则,使用W3C的opacity属性
elem.style.opacity = level/100;
}
}
}
[/code]
myLib.Albums.js
[code]/**
* @author robert
*/
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;
var objImg = new Image(); // 创建Image对象
objImg.src = curPath; // 给Image对象设置路径（从而获得图片的宽和高）
var curImgWidth = objImg.width; // 获得当前图片宽
var curImgHeight = objImg.height; // 获得当前图片高
// 执行创建相册DOM容器的闭包函数
(function(){
// 创建阴影层
var shardow = document.createElement("div");
shardow.setAttribute("id","shardow");
shardow.style.height = document.body.offsetHeight + "px";
// 将样式应用到阴影层上
dom.addClass(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 yScroll = com.getPageScroll()[1];
var pageHeight = com.getPageSize()[1];
var marginTop = yScroll+(pageHeight - (curImgHeight + 20))/2;
// 创建相册容器层
var container = document.createElement("div");
container.setAttribute("id","albumscontainer");
container.style.top = marginTop + 'px'
container.style.marginLeft = '-' + (curImgWidth/2+10) + 'px';
container.style.width = curImgWidth + "px";
container.style.height = curImgHeight + "px";