½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > À̹ÌÁö°ü·Ã > À̹ÌÁö°¶·¯¸® ¸ñ·Ï ÀϺθ¸ ¿òÁ÷À̱⠻ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
Javascript
PHP
ASP
css
html
mysql
jquery
image
API
Mobile
¸Þ´º
slide
°Ô½ÃÆÇ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
À̹ÌÁö°¶·¯¸® ¸ñ·Ï ÀϺθ¸ ¿òÁ÷À̱â
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù À̹ÌÁö°ü·Ã
´Ù¿î·Îµå Ƚ¼ö 999 ȸ
°£´Ü¼³¸í ÀϺÎÀÇ À̹ÌÁöºÎºÐ¸¸À» ¿òÁ÷À̸鼭 º¸¿©ÁÜ´Ï´Ù.¸¶¿ì½º·Ñ¿À¹ö½ÃÅ°¸é À̹ÌÁö°¡ µû¶ó ¹ÝÀÀµµ Çϴ±º¿ä!
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

<html>
<head>
<title>ÇØÇÇCGIÀÔ´Ï´Ù.</title>

<style type="text/css">
    #screen {
        background: #fff;
        overflow: hidden;
    }
    .panel {
        position: relative;
        float: left;
        width: 21%;
        height: 100;
        margin: 1%;
        overflow: hidden;
    }
    .imgPanel {
        position: absolute;
        border: none;
        text-decoration: none;
    }

</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;

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

var panel = {
    speed : .006,
    t : 0,
    O : [],
    over : false,

    run : function() {
        panel.t += panel.speed;
        for (var i = 0, o; o = panel.O[i]; i++)
            o.anim(i + panel.t);
    },

    init : function(){
        for (var i = 0, o; o = document.images[i]; i++){
            if (o.className.indexOf('panel') >= 0) {
                if(o.parentNode.href != undefined) {
                    var div = document.createElement("a");
                    div.href = o.parentNode.href;
                } else {
                    var div = document.createElement("div");
                }
                div.className = 'panel';
                var img = document.createElement("img");
                img.src = o.src;
                img.className = 'imgPanel';
                o.parentNode.replaceChild(div,o);
                div.appendChild(img);
                div.ims = img.style;
                div.iw = img.width;
                div.ih = img.height;
                div.cx = -div.iw / 2;
                div.cy = -div.ih / 2;
                div.anim = function(t) {
                    nw = this.offsetWidth;
                    nh = this.offsetHeight;
                    if (panel.over == this){
                        for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
                        var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
                        var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
                        if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
                    } else {
                        var mx = (this.iw - nw) * .5;
                        var my = (this.ih - nh) * .5;
                        var x = -mx * (1 + Math.cos(t * 1.2));
                        var y = -my * (1 + Math.sin(t));
                    }
                    this.cx += (x - this.cx) * .1;
                    this.cy += (y - this.cy) * .1;
                    this.ims.left = Math.round(this.cx) + 'px';
                    this.ims.top  = Math.round(this.cy) + 'px';
                }

                div.onmouseover = function()
                {
                    panel.over = this;
                }
                this.O.push(div);
            }
        }
        setInterval(panel.run, 32);
    }
}


onload = function ()
{
    panel.init();
}

</script>

</head>

<body>

<div id="screen">

    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick1.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick2.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick3.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick4.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick5.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick6.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick7.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick8.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick9.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick10.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick11.jpg"></a>
    <a href="http://happycgi.com"><img class="panel" src="http://demo.happycgi.com/jini/pick12.jpg"></a>
</div>

</body>
</html>

Ãâó: http://www.blueb.co.kr 


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 57181371 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.