3D 입체 갤러리-HTML,CSS,레이아웃

3D 입체 갤러리

로빈아빠

https://cmd.kr/html/180 URL이 복사되었습니다.

9,204 0 2011.06.28 17:07

본문

<html>
<head>
<title>http://www.blueb.co.kr</title>

window.onerror         = new Function("return true");
document.onselectstart = new Function("return false");
screen.bufferDepth     = 16;
/////////////////////
temp = 200;
speed = 200;
zOOm = .2;
HW    = .6;
/////////////////////
object = new Array();
Im = 0;
Om = 0;
nx = 0;
ny = 0;
xm = 0;
ym = 0;
A = 0;
Y = 0;
R = Math.PI / 180;

function CObj(N){

    I = Im[N];
    this.o = document.createElement("span");
    this.oi = document.createElement("img");
    this.oi.src = I.src;
    this.oi.onclick=new Function("object["+N+"].clic()");
      this.o.appendChild(this.oi);
    this.ot = document.createElement("div");
    this.ot.onmousedown=new Function("return false;");
    this.ot.innerHTML = "·" + I.alt + "·<br> "
    this.o.appendChild(this.ot);
        of = document.createElement("span");
        of.className="chain";
    this.o.appendChild(of);
        document.body.appendChild(this.o);

    this.N   = N;
    this.ys = 0;
    this.ac = Math.cos((360 * N / Om) * R);
    this.as = Math.sin((360 * N / Om) * R);
    this.x   = .35 * nx * this.ac;
    this.y   = 0;
    this.z   = .35 * nx * this.as;
    this.D   = 0;
    this.Z   = .4;
    this.dZ = false;
    this.pZ = 0;

    this.clic = function () {
        with(this){
            if(!dZ && pZ==0) dZ = true;
            else dZ = false, pZ = 0;
        }
    }

    this.anim = function () {
        with(this){
            s   = Math.sin(A * .01);
            c   = Math.cos(A * .01);
            xs = s * x + c * z;
            zs = s * z - c * x;
            ys += (Y - ys + y) / (speed * .2);
            D   = nx / (nx + zs);
            w   = D * (nx * zOOm);
            h   = w * HW;
            if(Z>.4 && dZ || pZ>0) A-=xs / 30;
            if(dZ){
                Z *= 1.01;
                x   = Z * nx * ac;
                z   = Z * nx * as;
            }
            if(Z>.8 && dZ)dZ = false, pZ = temp;
            if(dZ==false && Z>.4){
                if(pZ>0)pZ--;
                else {
                    Z *= .995;
                    x   = Z * nx * ac;
                    z   = Z * nx * as;
                }
            }

            with(o){
                style.width = w;
                style.height = h;
                style.top    = ny * .5 + ys * D - (h * .5);
                style.left   = nx * .5 + xs * D - (w * .5);
                style.zIndex = Math.round(D * 1000);
                s = Math.round(.03 * w);
                oi.style.borderWidth = s;
                ot.style.fontSize = (s * 2) + "px";
            }
        }
    }
}

function run(){
    A += (xm - nx * .5) / speed;
    Y = ym - ny * .5;
    for(i in object)object[i].anim();
    setTimeout("run()", 16);
}

document.onmousemove = function(e){
    if (window.event) e = window.event;
    xm = (e.x || e.clientX);
    ym = (e.y || e.clientY);
}

function resize(){
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
}
onresize = resize;

onload = function (){
    resize();
    xm = nx * .6;
    ym = ny * .5;
    Im=document.getElementById("img").getElementsByTagName("img");
    Om = Im.length;
    for(var i=0;i<Om;i++)object[i] = new CObj(i);
    run();
}

//-->
</script>
</head>

<body>

<span id=LB0 style="position:absolute;left:50%;top:50%;">
<span style="position:absolute;font-family:arial;font-size:10px;color:#000000;left:-50;top:-18">Loading...</span>
<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333">
<span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FF0000"></span></span></span>
<script>
m00=document.getElementById("img").getElementsByTagName("img");
m01=m00.length;
function images_loading_bar(){m02=0;
    for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);
    if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128);
    else setTimeout("images_loading_bar()", 64);};
        images_loading_bar();
</script>

</body>
</html>

댓글목록

등록된 댓글이 없습니다.

인기검색어

본문

관련링크

댓글목록

Search