웹마스터 팁
플래쉬 갤러리 비슷한 자바스크립 갤러리
2005.04.04 01:34
미리보기 : http://www.blueb.co.kr/bbs.php?table=JS_01&query=view&uid=214&p=1
-------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>BLUE-B</TITLE>
<style type="text/css">
.img {position:absolute; border:gray solid 1px; cursor:pointer; width:0px; }
.span {position:absolute; color:#ccc; font-family:verdana; font-size: 12px; width:200px;}
</style>
<script type="text/javascript">
<!--
window.onerror = new Function("return true");
document.onselectstart = new Function("return false");
screen.bufferDepth = 16;
O = new Array();
box = 0;
img = 0;
txt = 0;
tit = 0;
W = 0;
H = 0;
nI = 0;
sel = 0;
si = 0;
//////////////////
ZOOM = 7;
rImg = 1.33;
speed = .1;
//////////////////
function dText(){
txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
txt.innerHTML = O[sel].tx;
tit.innerHTML = O[sel].ti;
}
function CObj(n, s, x, tx, ti){
this.n = n;
this.dim = s;
this.tx = tx;
this.ti = ti;
this.is = img[n].style;
this.vz = 0;
this.sx = 0;
this.x0 = x;
this.x1 = 0;
this.zo = 0;
this.clic = function() {
with(this){
if(n!=sel){
O[sel].is.cursor = "pointer";
O[n].is.cursor = "default";
O[sel].dim = 100;
O[n].dim = ZOOM * 100;
sel = n;
l = 0;
for(k=0; k<nI; k++){
O[k].x0 = l;
l += O[k].dim;
}
txt.innerHTML = tit.innerHTML = "";
setTimeout("dText()", 32);
} else {
// not implemented
}
}
}
this.anim = function () {
with(this){
vz = speed*(vz+(x1-sx)*.5);
x1 -= vz;
sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
zo -= (zo-dim)*speed;
l = Math.round((x1*si)+6*(n+1));
w = Math.round(zo*si);
is.left = l;
is.top = (H-w*rImg)*.5;
is.width = w;
is.height = w*rImg;
if(sel == n){
if(sel<nI*.5)tit.style.left = txt.style.left = l+w+6;
else tit.style.left = txt.style.left = l-(nx*.25)-6;
txt.style.top = -(w*rImg)*.25;
tit.style.top = (w*rImg)*.33;
}
}
}
}
function run(){
for(j in O)O[j].anim();
setTimeout("run()", 16);
}
function doResize(){
tit.style.width = nx*.25;
txt.style.width = nx*.25;
tit.style.fontSize = (nx / 30) + "px";
txt.style.fontSize = (nx / 70) + "px";
with(box.style){
width = W;
height = H;
left = nx / 2 - W / 2;
top = ny / 2 - H / 2;
}
}
function resize(){
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
W = nx * 90 / 100;
si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
H = (100 * si * rImg) + 14;
setTimeout("doResize()", 16);
}
onresize = resize;
onload = function(){
box = document.getElementById("box");
tit = document.getElementById("tit");
txt = document.getElementById("txt");
img = box.getElementsByTagName("img");
nI = img.length;
resize();
s = ZOOM * 100;
x = 0;
tit.innerHTML = img[0].title;
txt.innerHTML = img[0].alt;
for(i=0; i<nI; i++) {
O[i] = new CObj(i, s, x, img[i].alt, img[i].title);
img[i].alt = "";
img[i].title = "";
img[i].onmousedown = new Function("return false;");
x += s;
s = 100;
}
O[0].is.cursor = "default";
setTimeout("box.style.visibility='visible';",100);
run();
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:0;top:0;height:10%;width:100%;background:#fff"></div>
<div style="position:absolute;left:0;top:90%;height:10%;width:100%;background:#fff"></div>
<div id=box style="position:absolute; border:gray solid 1px;visibility:hidden;">
<img class=img onclick="O[0].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/newborn.jpg" title="explain" alt="They explained a little about what they were doing.">
<img class=img onclick="O[1].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/majesty.jpg" title="strain" alt="I hoped I wouldn´t crack under the strain.">
<img class=img onclick="O[2].clic();" src="http://www.blueb.co.kr/SRC/javascript/image/img02.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">
<img class=img onclick="O[3].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane.">
<img class=img onclick="O[4].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/pyre.jpg" title="inhumane" alt="But they couldn´t hide the very worst of their inhumane undertakings from the people.">
<img class=img onclick="O[5].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
<img class=img onclick="O[6].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/spellcraft.jpg" title="never again" alt="Never more. Never again.">
<span class=span id=txt></span>
<span class=span id=tit></span>
</div>
<span class=span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
<span class=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:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("box").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>
-------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>BLUE-B</TITLE>
<style type="text/css">
.img {position:absolute; border:gray solid 1px; cursor:pointer; width:0px; }
.span {position:absolute; color:#ccc; font-family:verdana; font-size: 12px; width:200px;}
</style>
<script type="text/javascript">
<!--
window.onerror = new Function("return true");
document.onselectstart = new Function("return false");
screen.bufferDepth = 16;
O = new Array();
box = 0;
img = 0;
txt = 0;
tit = 0;
W = 0;
H = 0;
nI = 0;
sel = 0;
si = 0;
//////////////////
ZOOM = 7;
rImg = 1.33;
speed = .1;
//////////////////
function dText(){
txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
txt.innerHTML = O[sel].tx;
tit.innerHTML = O[sel].ti;
}
function CObj(n, s, x, tx, ti){
this.n = n;
this.dim = s;
this.tx = tx;
this.ti = ti;
this.is = img[n].style;
this.vz = 0;
this.sx = 0;
this.x0 = x;
this.x1 = 0;
this.zo = 0;
this.clic = function() {
with(this){
if(n!=sel){
O[sel].is.cursor = "pointer";
O[n].is.cursor = "default";
O[sel].dim = 100;
O[n].dim = ZOOM * 100;
sel = n;
l = 0;
for(k=0; k<nI; k++){
O[k].x0 = l;
l += O[k].dim;
}
txt.innerHTML = tit.innerHTML = "";
setTimeout("dText()", 32);
} else {
// not implemented
}
}
}
this.anim = function () {
with(this){
vz = speed*(vz+(x1-sx)*.5);
x1 -= vz;
sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
zo -= (zo-dim)*speed;
l = Math.round((x1*si)+6*(n+1));
w = Math.round(zo*si);
is.left = l;
is.top = (H-w*rImg)*.5;
is.width = w;
is.height = w*rImg;
if(sel == n){
if(sel<nI*.5)tit.style.left = txt.style.left = l+w+6;
else tit.style.left = txt.style.left = l-(nx*.25)-6;
txt.style.top = -(w*rImg)*.25;
tit.style.top = (w*rImg)*.33;
}
}
}
}
function run(){
for(j in O)O[j].anim();
setTimeout("run()", 16);
}
function doResize(){
tit.style.width = nx*.25;
txt.style.width = nx*.25;
tit.style.fontSize = (nx / 30) + "px";
txt.style.fontSize = (nx / 70) + "px";
with(box.style){
width = W;
height = H;
left = nx / 2 - W / 2;
top = ny / 2 - H / 2;
}
}
function resize(){
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
W = nx * 90 / 100;
si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
H = (100 * si * rImg) + 14;
setTimeout("doResize()", 16);
}
onresize = resize;
onload = function(){
box = document.getElementById("box");
tit = document.getElementById("tit");
txt = document.getElementById("txt");
img = box.getElementsByTagName("img");
nI = img.length;
resize();
s = ZOOM * 100;
x = 0;
tit.innerHTML = img[0].title;
txt.innerHTML = img[0].alt;
for(i=0; i<nI; i++) {
O[i] = new CObj(i, s, x, img[i].alt, img[i].title);
img[i].alt = "";
img[i].title = "";
img[i].onmousedown = new Function("return false;");
x += s;
s = 100;
}
O[0].is.cursor = "default";
setTimeout("box.style.visibility='visible';",100);
run();
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:0;top:0;height:10%;width:100%;background:#fff"></div>
<div style="position:absolute;left:0;top:90%;height:10%;width:100%;background:#fff"></div>
<div id=box style="position:absolute; border:gray solid 1px;visibility:hidden;">
<img class=img onclick="O[0].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/newborn.jpg" title="explain" alt="They explained a little about what they were doing.">
<img class=img onclick="O[1].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/majesty.jpg" title="strain" alt="I hoped I wouldn´t crack under the strain.">
<img class=img onclick="O[2].clic();" src="http://www.blueb.co.kr/SRC/javascript/image/img02.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">
<img class=img onclick="O[3].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane.">
<img class=img onclick="O[4].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/pyre.jpg" title="inhumane" alt="But they couldn´t hide the very worst of their inhumane undertakings from the people.">
<img class=img onclick="O[5].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
<img class=img onclick="O[6].clic();" src="http://www.blueb.co.kr/SRC/javascript/image3/spellcraft.jpg" title="never again" alt="Never more. Never again.">
<span class=span id=txt></span>
<span class=span id=tit></span>
</div>
<span class=span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
<span class=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:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("box").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>
댓글 13
-
김재영
2005.08.31 14:31
멋지십니다.~~ 잘 쓰겠습니다. (--)(__).,,......^^ -
서러운초보
2005.09.01 23:06
지금 블루비를 다녀 와서보니
정말 환상 그 자체더군요
와~ ! 감탄사가 절로 나오고요
그래서 회원가입하고 테스트 소스 하나 가져왔습니다.
그런데
제로보드에서는 자바소스가 안먹는가 봅니다.
게시판에 넣었더니 아무런 반응이 없네요
누구 고수님들 진실을 좀 알려 주시렵니까 !!!
부탁합니다. -
아가페
2005.04.04 11:39
정말 멋지네요... 예술입니다. -
ganji
2005.04.07 10:03
컥~~블루비의 운영자님?
정말 블루비 쵝오~~~죠 ^^
언제나 좋은 소스 감사드립니다. (__) -
ganji
2005.04.07 10:03
참,,,한마디 더,,,^^
개인적으로 애플의 도크렛을 표현한 소스,,,
정말 환상이었습니다. ^^ -
GQ`styLe™
2005.04.08 14:53
최고 최고 최고 스크립으로 이런 멋진 효과를 대단합니다!!!!
어찌 이런 환상적인 소스를 -_-b -
김삼희
2005.04.13 23:39
대단합니다;; 인간승리군요;; -
11월의비
2005.04.19 01:28
멋있습니다. (10자의 대단한 압박... )
닥닥닥 -
김홍근
2005.06.18 12:58
오호~~~~~멋있다..... -
조정란
2005.06.24 03:19
정말 멋있네요..
유용하게 쓸께요. -
신동성
2005.07.11 15:50
멋있습니다.^^ -
이만수
2005.11.06 00:37
와 정말 멋집니다 환상 입니다긋~ -
찌고래
2005.12.19 21:14
HTML 설정을 하고.. `자동 줄바꿈..` 메시지 상자에서 `취소` 단추를 누른 다음에 스크립트 소스를 붙여넣기 하면 됩니다
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 뉴스티커 [4] | beMax | 2005.08.26 |
| Rain# 머문시간 나타내기 [상태창] | Rain | 2005.08.14 |
| 자바스크립트 음악목록 랜덤 재생하기 | 만능천사 | 2005.08.14 |
| 미디어 플레이어? 난 곰플레이어야! [9] | 송재영 | 2005.07.24 |
| SP2 팝업차단 무시하고 팝업띠우기?! [8] | 오길호 | 2005.07.23 |
| 파일 업로드 버튼 이미지로 사용하기 [1] | 행복한고니 | 2005.06.29 |
| 마우스 오른쪽버튼 금지시키기스크립트 [5] | 박시현 | 2005.06.26 |
| 링크 점선 처리 onfocus=blur() [5] | woosh | 2005.06.06 |
| 상태 표시줄 감지 (URL 가리고 내용 표시) 업그레이드 소스 [2] | ArⓒH | 2005.05.30 |
| 팝업창을 내용에 맞게 크기 자동조정하기 [2] | 김경수 | 2005.04.23 |
| 타켓으로 페이지 이동하는 스크립트 [2] | 로크 | 2005.04.16 |
| 풍선도움말 스크립트 [3] | 행복한고니 | 2005.04.11 |
| 플래쉬 갤러리 비슷한 자바스크립 갤러리 [13] | monozzang | 2005.04.04 |
| 플래시 칼라피커 두번째 버전 [1] | 행복한고니 | 2005.03.16 |
| 테이블선(지정위치)을 따라 이동하는 top [3] | sharim | 2005.03.14 |
| 마우스커서 움직임으로 이미지목록 스크롤 [1] | monozzang | 2005.03.13 |
| 브라우저를 동적으로 부드럽게 리사이즈 하는 소스 [4] | monozzang | 2005.03.06 |
| 가로 세로가 호환되는 메뉴 [3] | 이영준 | 2005.03.02 |
| 주소자동으로 이동 시키기(포워딩) [8] | 네츠키 | 2005.02.22 |
| 홈피 만들때 자주 사용되는 메타태그 모음 [18] | 김태영 | 2005.02.20 |