最近比较空的时候写了个简单的相册效果,实现了基本的功能，还没有加入太多的动画效果,不过有兴趣的朋友可以自己接着扩展，我代码中的注释写得算比较清楚了，呵呵,我有时间再更新更多的动画效果吧.
效果截图：
源代码：
<!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=gb2312" /> <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"> <!-- function Albums(){ var hotelName = "凌泷阁餐厅"; var oImgs = document.getElementsByTagName("img"); // 页面所有图片元素 var imgsPath = []; // 所有需要在相册程序中显示的图片路径 var slideImgs = []; // 所有需要在相册程序中显示的图片对象 var slideImgNum = 0; // 需要在相册程序中显示的图片数量 var temIndex = 0; // 相册中当前显示的图片在所有图片中的索引位置 var strIndex = ""; var oShardow = null; // 阴影折照层 var oContainer = null; // 相册容器 var oCurImg = null; // 当前图片（img标签）元素 var oInfoBar = null; // 顶部图片信息栏 var oLogoTxt = null; // LOGO信息（www.fg114.com）栏 var oImgAlt = null; // 图片介绍文字栏 var oCloseBar = null; // 关闭按钮 var oNavBar = null; // 底部导航栏 var oPrePage = null; // 上一页 var oImgIndex = null; // 图片位置索引栏 var oNextPage = null; // 下一页 var imgPath = ""; // 图片路径 var imgAlt = ""; // 图片信息 var logoTxt = "订餐小秘书"; // Logo信息文字 var logoImg = "/article/UploadPic/20087/13/200871314467574.jpg"; // Logo图片 // 信息栏样式 var styleInfoBar = { position: 'absolute', width: '710px', height: '40px', lineHeight: '40px', fontSize: '14px', backgroundColor: '#FFF', color: '#000', textAlign: 'center', overflow: 'hidden', fontWeight: 'bold' }; // 可用的样式 var stylePageEnable = { top: '0', width: '100px', cursor: 'pointer', color: '#000', textDecoration: 'underline', fontWeight: 'bold' }; // 不可用的样式 var stylePageDisable = { cursor: 'default', color: '#FFF', textDecoration: 'none', fontWeight: 'normal' }; for(var i=0;i<oImgs.length;i++) { var imgClass = oImgs[i].className || oImgs[i].getAttribute("class"); if(imgClass=="albumsImg") { imgsPath[i] = oImgs[i].src; slideImgs[i] = oImgs[i]; oImgs[i].setAttribute("ren",(i+1)); oImgs[i].onclick = function(){ // 获得当前图片路径 imgPath = this.src; // 获得当前图片的索引位置 temIndex = parseInt(this.getAttribute("ren")); // 获得当前图片alt属性，作为图片说明 imgAlt = hotelName + "—" + this.getAttribute("alt"); (function(){ // 添加阴影层 var shardow = document.createElement("div"); shardow.setAttribute("id","shardow"); var styleShardow = { height: '100%', width: '100%', opacity: .4, filter: 'alpha(opacity=40)', position: 'absolute', background: '#000', top: '0', left: '0', zIndex: 10 }; setStyle(shardow,styleShardow); document.body.appendChild(shardow); // 添加图片容器层 var imgContainer = document.createElement("div"); imgContainer.setAttribute("id","imgContainer"); var styleContainer = { position: 'absolute', border: '5px solid #777', height: '467px', width: '700px', left: '50%', top: '50%', opacity: .1, filter: 'alpha(opacity=10)', margin: '-244px 0 0 -360px', padding: '5px', background: '#F5F5FE', zIndex: 11 }; setStyle(imgContainer,styleContainer); document.body.appendChild(imgContainer); // 添加图片到图片容器 var ImgSlide = document.createElement("img"); ImgSlide.setAttribute("src",imgPath); ImgSlide.setAttribute("id","slideImg"); ImgSlide.setAttribute("alt",imgAlt); imgContainer.appendChild(ImgSlide); // 添加顶部图片信息栏 var infoBar = document.createElement("div"); infoBar.setAttribute("id","infoBar"); var styleTopInfoBar = { top: '0', left: '0' }; setStyle(infoBar,styleInfoBar); setStyle(infoBar,styleTopInfoBar); imgContainer.appendChild(infoBar); // 添加LOGO文字 var oLogo = document.createElement("p"); oLogo.setAttribute("id","logo"); var styleLogoTxt = { width: '140px', height: '30px', top: '5px', left: '0' }; setStyle(oLogo,styleInfoBar); setStyle(oLogo,styleLogoTxt); var oImgLogo = document.createElement("img"); oImgLogo.setAttribute("id","imgLogo"); oImgLogo.setAttribute("alt",logoTxt); oImgLogo.setAttribute("src",logoImg); oImgLogo.src = logoImg; oLogo.appendChild(oImgLogo); infoBar.appendChild(oLogo); // 添加图片说明信息 var imgAltInfo = document.createElement("p"); imgAltInfo.setAttribute("id","imgAltInfo"); var styleAltInfo = { margin: '0 auto', width: '430px', height: '40px', overflow: 'hidden', zIndex: 99 }; setStyle(imgAltInfo,styleAltInfo); var txtAltInfo = document.createTextNode(imgAlt); imgAltInfo.appendChild(txtAltInfo); infoBar.appendChild(imgAltInfo); // 添加关闭按钮 var closeBar = document.createElement("img"); closeBar.setAttribute("id","imgClose"); closeBar.setAttribute("src","/article/UploadPic/20087/13/200871314468959.gif"); closeBar.src = "/article/UploadPic/20087/13/200871314468959.gif"; closeBar.setAttribute("alt","关闭窗口"); var styleCloseBar = { position: 'absolute', top: '9px', right: '12px', cursor: 'pointer', width: '66px', height: '22px' }; setStyle(closeBar,styleCloseBar); infoBar.appendChild(closeBar); // 添加底部导航信息 var navBar = document.createElement("div"); navBar.setAttribute("id","navBar"); var styleNavBar = { bottom: '0', left: '0' }; setStyle(navBar,styleInfoBar); setStyle(navBar,styleNavBar); imgContainer.appendChild(navBar); // 上一页 var prePage = document.createElement("p"); prePage.setAttribute("id","prePage"); var stylePrePage = { left: '0', zIndex: 99, width: '80px' }; setStyle(prePage,styleInfoBar); setStyle(prePage,stylePageEnable); setStyle(prePage,stylePrePage); var txtPrePage = document.createTextNode("上一页"); prePage.appendChild(txtPrePage); navBar.appendChild(prePage); var nextPage = document.createElement("p"); nextPage.setAttribute("id","nextPage"); var styleNextPage = { right: '0', filter: '', width: '80px' }; setStyle(nextPage,styleInfoBar); setStyle(nextPage,stylePageEnable); setStyle(nextPage,styleNextPage); var txtIndex = document.createElement("p"); txtIndex.setAttribute("id","txtIndex"); var styleTxtIndex = { margin: '0 auto', width: '550px', height: '40px', zIndex: 99, fontFamily: 'Georgia, sans-serif' }; setStyle(txtIndex,styleTxtIndex); strIndex = "共" + slideImgNum + " 张图片 " + temIndex + " / " + slideImgNum; var textIndex = document.createTextNode(strIndex); txtIndex.appendChild(textIndex); navBar.appendChild(txtIndex); // 下一页 var txtNextPage = document.createTextNode("下一页"); nextPage.appendChild(txtNextPage); navBar.appendChild(nextPage); if(temIndex==slideImgNum) setStyle(nextPage,stylePageDisable); if(temIndex==1) setStyle(prePage,stylePageDisable); slideUp(imgContainer); })(); oShardow = document.getElementById("shardow"); oContainer = document.getElementById("imgContainer"); oCurImg = document.getElementById("slideImg"); oInfoBar = document.getElementById("imgAltInfo"); oCloseBar = document.getElementById("imgClose"); oPrePage = document.getElementById("prePage"); oImgIndex = document.getElementById("txtIndex"); oNextPage = document.getElementById("nextPage"); // 设置关闭按钮处理函数 oCloseBar.onclick = function(){ document.body.removeChild(oShardow); document.body.removeChild(oContainer); } oPrePage.onclick = function(){ if(temIndex > 1){ if(temIndex == slideImgNum){ oCurImg.setAttribute("src",imgsPath[(temIndex-2)]); oCurImg.src = imgsPath[(temIndex-2)]; oInfoBar.innerHTML = hotelName + "—" + slideImgs[(temIndex-2)].getAttribute("alt"); strIndex = "共" + slideImgNum + " 张图片 " + (temIndex-1) + " / " + slideImgNum; oImgIndex.innerHTML = strIndex; temIndex -= 1; setStyle(oNextPage,stylePageEnable); } else{ oCurImg.setAttribute("src",imgsPath[temIndex]); oCurImg.src = imgsPath[temIndex]; oInfoBar.innerHTML = hotelName + "—" + slideImgs[temIndex].getAttribute("alt"); strIndex = "共" + slideImgNum + " 张图片 " + (temIndex-1) + " / " + slideImgNum; oImgIndex.innerHTML = strIndex; if(temIndex > 1)temIndex -= 1; if(temIndex == 1) setStyle(oPrePage,stylePageDisable); } } } oNextPage.onclick = function(){ if(temIndex != slideImgNum){ oCurImg.setAttribute("src",imgsPath[temIndex]); oCurImg.src = imgsPath[temIndex]; oInfoBar.innerHTML = hotelName + "—" + slideImgs[temIndex].getAttribute("alt"); strIndex = "共" + slideImgNum + " 张图片 " + (temIndex+1) + " / " + slideImgNum; oImgIndex.innerHTML = strIndex; if(temIndex != slideImgNum) temIndex += 1; if(temIndex == slideImgNum) setStyle(oNextPage,stylePageDisable); if(temIndex!=1) setStyle(oPrePage,stylePageEnable); } } // 除去链接默认的click事件 return false; } slideImgNum ++; } } } // 设置元素样式 function setStyle(elem,prop){ var old = {}; for(var i in prop){ old[i]=elem.style[i]; elem.style[i] = prop[i]; } return old; } // 通过在短时间内增加透明度逐步显示隐藏元素的函数 function slideUp(elem){ // 从0透明度开始滑动 setOpacity(elem,0); // 我们在1秒钟内执行一个20帧的动画 for(var i=0;i<=100;i+=5){ // 保证我们能够保持正确的'i'的闭包函数 (function(){ var pos = i; // 设置 setTimeout 以让它能够在指定点运行 setTimeout(function(){ // 设置元素的透明 setOpacity(elem,pos); },(pos + 1) * 10); })(); } } // 设置元素透明度(级别从0~100) function setOpacity(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; } } //--> </script> </head> <body onload="Albums();"> <h1>凌泷阁餐厅相册</h1> <div id="alums"> <ul id="imglist"> <li><a href="/article/UploadPic/20087/13/2008713144220916.jpg"><img src="/article/UploadPic/20087/13/2008713144220916.jpg" class="albumsImg" alt="包房过道" /></a><a href="/article/UploadPic/20087/13/2008713144220916.jpg">凌泷阁-包房过道</a></li> <li><a href="/article/UploadPic/20087/13/2008713144222475.jpg"><img src="/article/UploadPic/20087/13/2008713144222475.jpg" class="albumsImg" alt="包房环境" /></a><a href="/article/UploadPic/20087/13/2008713144222475.jpg">凌泷阁-包房环境</a></li> <li><a href="/article/UploadPic/20087/13/2008713144223231.jpg"><img src="/article/UploadPic/20087/13/2008713144223231.jpg" class="albumsImg" alt="餐厅环境" /></a><a href="/article/UploadPic/20087/13/2008713144223231.jpg">凌泷阁-餐厅环境</a></li> <li><a href="/article/UploadPic/20087/13/2008713144224650.jpg"><img src="/article/UploadPic/20087/13/2008713144224650.jpg" class="albumsImg" alt="餐厅特色" /></a><a href="/article/UploadPic/20087/13/2008713144224650.jpg">凌泷阁-餐厅特色</a></li> <li><a href="/article/UploadPic/20087/13/2008713144225376.jpg"><img src="/article/UploadPic/20087/13/2008713144225376.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="/article/UploadPic/20087/13/2008713144225376.jpg">凌泷阁-餐厅迎宾</a></li> <li><a href="/article/UploadPic/20087/13/2008713144226625.jpg"><img src="/article/UploadPic/20087/13/2008713144226625.jpg" class="albumsImg" alt="大包房" /></a><a href="/article/UploadPic/20087/13/2008713144226625.jpg">凌泷阁-大包房</a></li> <li><a href="/article/UploadPic/20087/13/2008713144227374.jpg"><img src="/article/UploadPic/20087/13/2008713144227374.jpg" class="albumsImg" alt="过道环境" /></a><a href="/article/UploadPic/20087/13/2008713144227374.jpg">凌泷阁-过道环境</a></li> <li><a href="/article/UploadPic/20087/13/2008713144228724.jpg"><img src="/article/UploadPic/20087/13/2008713144228724.jpg" class="albumsImg" alt="小包房" /></a><a href="/article/UploadPic/20087/13/2008713144228724.jpg">凌泷阁-小包房</a></li> <li><a href="/article/UploadPic/20087/13/2008713144229890.jpg"><img src="/article/UploadPic/20087/13/2008713144229890.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="/article/UploadPic/20087/13/2008713144229890.jpg">凌泷阁-餐厅迎宾</a></li> <li><a href="/article/UploadPic/20087/13/2008713144230443.jpg"><img src="/article/UploadPic/20087/13/2008713144230443.jpg" class="albumsImg" alt="大包房" /></a><a href="/article/UploadPic/20087/13/2008713144230443.jpg">凌泷阁-大包房</a></li> <li><a href="/article/UploadPic/20087/13/2008713144232697.jpg"><img src="/article/UploadPic/20087/13/2008713144232697.jpg" class="albumsImg" alt="过道环境" /></a><a href="/article/UploadPic/20087/13/2008713144232697.jpg">凌泷阁-过道环境</a></li> <li><a href="/article/UploadPic/20087/13/2008713144232965.jpg"><img src="/article/UploadPic/20087/13/2008713144232965.jpg" class="albumsImg" alt="小包房" /></a><a href="/article/UploadPic/20087/13/2008713144232965.jpg">凌泷阁-小包房</a></li> </ul> </div> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...