Live Brilliant

3D 갤러리 소스 본문

개발은 핵찜이야/SCRIPT

3D 갤러리 소스

주인정 2012. 4. 17. 15:13

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

<style type="text/css">
span {position:absolute;}
img {position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;border:#efefef solid 1px;}
div {position:absolute;top:120%;font-family:verdana;text-align:center;width:100%;color:#444;white-space:nowrap;}
.chain {position:absolute;top:-2000;left:49.5%;width:1%;height:2000;background:#444;}
</style>
<script type="text/javascript">
<!--

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>

<DIV id=img style="VISIBILITY: hidden">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/3D-eyes-big.jpg alt="Photo 1">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/raindrop.jpg alt="Photo 2">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/spellcraft.jpg alt="Photo 3">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/gm_Apophysis10.jpg alt="Photo 4">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/gm_Apophysis11.jpg alt="Photo 5">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/gm_Apophysis3.jpg alt="Photo 6">
<img src=http://www.blueb.co.kr/SRC/javascript/image3/gm_Apophysis10a.jpg alt="Photo 7">
</DIV>

<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>

'개발은 핵찜이야 > SCRIPT' 카테고리의 다른 글

좌우 무한 슬라이드 롤링 스크립트  (0) 2012.04.17
레이어 롤링효과  (0) 2012.04.17
퀵메뉴(사이드 따라다니는 메뉴)  (0) 2012.04.17
페이지내 위아래로 바로 이동  (0) 2012.04.17
메뉴 이미지 온오프 유지  (0) 2012.04.16
'개발은 핵찜이야/SCRIPT' Related Articles more
Comments