很COOL的相册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Author:Stupid CAT QQ:278306428 HomePage:http://blog.sina.com.cn/u/1234091924 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Keywords" content="图片轮换代码，CSS+DIV，JAVASCRIPT，网页特效，WEB2.0" />
<meta http-equiv="Description" content="Stupid CAT Images Viewer v1.0" />
<meta content="all" name="robots" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="Stupid CAT" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Stupid CAT Images Viewer v1.2</title>
<!--核心函数，需在头部申明-->
<script type="text/javascript" src="sca.js"></script>
<!---防止重复加载-->
<script type="text/javascript" src="imageLoader.js"></script>
<!--具体图片信息-->
<script type="text/javascript" src="imgsrc.js"></script>
<!--图片载入前后-->
<script type="text/javascript">
var l=0,imgs,sum=0;
function loadImg(){
messageBox.innerText=((sum-l)*100/sum).toFixed(0)+"%";
bar.style.width=((sum-l)*140/sum)+"px";
l--;
if (l==0){
bar.style.width="100%";
mask.style.display="none";
messageBox.innerHTML="Stupid CAT Images Viewer v1.1<br /><a href='mailto:abadcat@163.com'>MAIL</a> <a href='http://blog.sina.com.cn/u/498ebf94010007bd' style='cursor:help'>HELP</a> <a href='#'>PRIVICE</a>";
myshow.style.visibility="visible";
screenMask.style.display="none";
}
}
</script>
</head>
<body onload="layout();info()" onkeypress="hotKey()">
<!--进度条信息框与版权-->
<div id="loading">
<div id="message_box">1%</div>
<div id="mask"><div id="bar"></div></div>
<div class="copyright">©<a href="http://blog.sina.com.cn/u/1234091924" title="blog">Stupid CAT</a> Blog 2006</div>
</div>
<!--小图片集预览-->
<div class="img_container" id="img_container">
<script type="text/javascript">
//核心代码
for (i=0;i<myimg.length;i++){
document.write("<div><div><img src='"+myimg[i][0]+"' alt='"+myimg[i][1]+"'/></div>"+"<span id='num"+i+"'>"+myimg[i][2]+"</span></div>")
}
var smallImg=document.getElementById("img_container").getElementsByTagName("img")
for (var i=0;i<smallImg.length;i++){
var height=smallImg[i].offsetHeight,width=smallImg[i].offsetWidth
if(width>height){
smallImg[i].style.height="60px"
smallImg[i].style.width=width/height*60+"px";}
else{
smallImg[i].style.width="60px"
smallImg[i].style.height=height/width*60+"px";}
smallImg[i].onmouseover=function(){this.parentElement.style.borderColor="#cccccc";}
smallImg[i].onmouseout=function(){this.parentElement.style.borderColor="#666666";}
smallImg[i].onclick=function(){current=parseInt(this.alt)-1;imgChange();help.innerText="You chosed image "+(1+current)+".";}
}
</script>
</div>
<!--正片显示层-->
<div id="myshow"><img id="show" src="babyface/bg.jpg" onmousedown="MDown(myshow)" alt=""/>
<div><div id="info_box">info</div>
<div class="close" onclick="closeMyshow();">close</div>
</div>
</div>
<div id="control">
<div class="help" id="help">Welcome to SCAv1.2!</div>
<div class="move" onmousedown="MDown(control)">M</div>
<div onclick="next();">next</div>
<div onclick="previous();">prev</div>
<div onclick="ptext()" id="ps">play</div>
<div onclick="last();">last</div>
<div onclick="first();">first</div>
<div onclick="rtext();" id="pr">rand</div>
<div onclick="mtext();" id="pm">mask</div>
</div>
<script type="text/javascript">
//实现控制层鼠标效果
var controlItem=document.getElementById("control").getElementsByTagName("div");
for(i=0;i<controlItem.length;i++){
controlItem[i].onmouseover=function(){this.style.background="#666666";this.style.color="#cccccc";}
controlItem[i].onmouseout=function(){this.style.background="#cccccc";this.style.color="#333333";}
}
</script>
<!--screenmask防止在图片未下载完前进行页面操作-->
<div id="screenmask"></div>
<!--SCAv1.2主要控制函数，再次调用-->
<script type="text/javascript" src="sca.js"></script>
<!--实现图片载入记录-->
<script type="text/javascript">
imgs=imgContainer.getElementsByTagName("img");
sum=l=imgs.length;
for (i=0;i<l;i++){
imgs[i].onload=loadImg;
imgs[i].onerror=loadImg;
imgs[i].style.display='';
}
</script>
</body>
</html>
