CSS로 만든 - 3D 입체 갤러리 > html

CSS로 만든 - 3D 입체 갤러리

페이지 정보

작성자 서방님 댓글 0건 조회 119회 작성일 07-08-10 18:00

본문

<html>
<head>
<title>NestStep's Song' pics</title>

#canvas {
 position:absolute;
 left: 0%;
 top: 0%;
 width: 100%;
 height: 100%;
 background: #000;
 overflow: hidden;
 }
 #canvas img {
 position: absolute;
 background: #666;
 overflow: hidden;
 cursor: pointer;
 left: 100%;
 border-color: #000;
 border-style: solid;
 border-width: 1px;
 }
 #canvas span {
 position: absolute;
 color: #9C9;
 font-family: 'courier new', typewriter, matrix, monospace;
 font-size: 0px;
 white-space: nowrap;
 left: -1000px;
 background:#010;
 filter: alpha(opacity=90);
 opacity:0.9;
 }
</style>
<script type="text/javascript">
var O = [];
var cont = 0;
var N = 0;
var S = 0;
var img, spa;
var s = {xm:0, ym:0, nx:0, ny:0, nw:0, nh:0, cx:0, cy:0, zoom:1};
var c = {x:0, y:0, z:-40000, xt:0, yt:0, zt:0};

//////////////////////////////////////////////////////////////////////////////

function resize() {

    with(document.getElementById("canvas")){
        s.nx = offsetLeft;
        s.ny = offsetTop;
        s.nw = offsetWidth;
        s.nh = offsetHeight;
        s.zoom = s.nh / 700;
    }
}
onresize = resize;

document.onmousemove = function(e){
    if(window.event) e=window.event;
    s.xm = (e.x || e.clientX) - s.nx - s.nw * .5;
    s.ym = (e.y || e.clientY) - s.ny - s.nh * .5;
}

    this.click = function(){
        with(this){
            if(S!=this){
                c.xt = x;
                c.yt = y;
                c.zt = z;
                S = this;
            } else {
                S = 0;
                c.zt += 1600;
            }
        }
    }
}

function run(){
 s.cx += (s.xm - s.cx) / 10;
 s.cy += (s.ym - s.cy) / 10;
 c.x += (c.xt - c.x) / 20;
 c.y += (c.yt - c.y) / 20;
 c.z += (c.zt - c.z) / 20;
 for(var i=0; i<N; i++) O[i].anim();
 setTimeout("run();", 16);
}

onload = function() {
 resize();
 s.cx = s.nw / 2;
 s.cy = s.nh / 2;
 cont = document.getElementById("canvas");
 img = document.getElementById("canvas").getElementsByTagName("img");
 spa = document.getElementById("canvas").getElementsByTagName("span");
 N = img.length;
 for(var i=0; i<N; i++) O[i] = new CObj(i);
 run();
 O[0].click();

}

</script>
</head>

<body>

</body>
</html>

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
98	style.display, style.visibility	서방님	136	08-23
열람중	CSS로 만든 - 3D 입체 갤러리	서방님	120	08-10
96	이미지 메뉴탭 만들어 보기 - 이미지 위치 변경이용	서방님	86	08-10
95	이쁜 헤더 만들기	서방님	83	07-18
94	네이버 페이징	서방님	111	06-28
93	태그에서 타겟(target) 사용법	서방님	121	06-27
92	Color Table for HTML 3.0	서방님	159	06-27
91	CSS Selector에 대해 알아봅시다~ [응용편 #3]	서방님	83	06-23
90	CSS Selector에 대해 알아봅시다~ [응용편 #2]	서방님	73	06-23
89	CSS Selector에 대해 알아봅시다~ [응용편 #1]	서방님	96	06-23
88	CSS Selector에 대해 알아봅시다~ [초급편]	서방님	98	06-23
87	height="100%" 가 안먹을때.... DTD 문제였다	서방님	158	06-23
86	css div 연습	서방님	130	06-23
85	id와 클래스 조합css	서방님	85	06-23
84	모르면 발목잡는...DTD	서방님	131	06-23

CSS로 만든 - 3D 입체 갤러리 > html

인기검색어

html