• 很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">&copy;<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>

  • 相关阅读:
    从YouTube改版看“移动优先”——8个移动优先网站设计案例赏析
    如何设计出正确的搜索模式?
    20个优秀手机界面扁平化设计,让你一秒看懂扁平化
    更巧妙的表单设计与登陆访问
    子树路径
    选拔赛-最短路
    hiho1050(树的直径)
    逆元
    hiho1303(模线性方程组)
    扩展欧几里德
  • 原文地址:https://www.cnblogs.com/MaxIE/p/645038.html
Copyright © 2020-2023  润新知