|
<!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 = "/effects/UploadFiles_7074/201008/2010083010323111.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","/effects/UploadFiles_7074/201008/2010083010381521.gif");
closeBar.src = "/effects/UploadFiles_7074/201008/2010083010381521.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="/effects/UploadFiles_7074/201008/2010083010403020.jpg"><img src="/effects/UploadFiles_7074/201008/2010083010403020.jpg" class="albumsImg" alt="包房过道" /></a><a href="/effects/UploadFiles_7074/201008/2010083010403020.jpg">凌泷阁-包房过道</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011000969.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011000969.jpg" class="albumsImg" alt="包房环境" /></a><a href="/effects/UploadFiles_7074/201008/2010083011000969.jpg">凌泷阁-包房环境</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011005042.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011005042.jpg" class="albumsImg" alt="餐厅环境" /></a><a href="/effects/UploadFiles_7074/201008/2010083011005042.jpg">凌泷阁-餐厅环境</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011014236.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011014236.jpg" class="albumsImg" alt="餐厅特色" /></a><a href="/effects/UploadFiles_7074/201008/2010083011014236.jpg">凌泷阁-餐厅特色</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011023162.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011023162.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="/effects/UploadFiles_7074/201008/2010083011023162.jpg">凌泷阁-餐厅迎宾</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011031779.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011031779.jpg" class="albumsImg" alt="大包房" /></a><a href="/effects/UploadFiles_7074/201008/2010083011031779.jpg">凌泷阁-大包房</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011040125.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011040125.jpg" class="albumsImg" alt="过道环境" /></a><a href="/effects/UploadFiles_7074/201008/2010083011040125.jpg">凌泷阁-过道环境</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011043552.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011043552.jpg" class="albumsImg" alt="小包房" /></a><a href="/effects/UploadFiles_7074/201008/2010083011043552.jpg">凌泷阁-小包房</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011053680.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011053680.jpg" class="albumsImg" alt="餐厅迎宾" /></a><a href="/effects/UploadFiles_7074/201008/2010083011053680.jpg">凌泷阁-餐厅迎宾</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011061469.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011061469.jpg" class="albumsImg" alt="大包房" /></a><a href="/effects/UploadFiles_7074/201008/2010083011061469.jpg">凌泷阁-大包房</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011065441.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011065441.jpg" class="albumsImg" alt="过道环境" /></a><a href="/effects/UploadFiles_7074/201008/2010083011065441.jpg">凌泷阁-过道环境</a></li>
<li><a href="/effects/UploadFiles_7074/201008/2010083011073653.jpg"><img src="/effects/UploadFiles_7074/201008/2010083011073653.jpg" class="albumsImg" alt="小包房" /></a><a href="/effects/UploadFiles_7074/201008/2010083011073653.jpg">凌泷阁-小包房</a></li>
</ul>
</div>
</body>
</html> |
注册 登录
