ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î


Ç÷¡½¬ °¶·¯¸® ºñ½ÁÇÑ ÀÚ¹Ù½ºÅ©¸³ °¶·¯¸®
ȨÆäÀÌÁöȨÆäÀÌÁö 19³â Àü
¹Ì¸®º¸±â : http://www.xtx.kr/tag/jabgel.html

<HTML>
<HEAD>
<TITLE>xtx.kr</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>
ÃßõÃßõ : 276 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.