본문 바로가기

javascript

움직이는 배너텍스트 주위를 맴도는 메뉴 텍스트 효과

[스크립트]

<STYLE>

.fly {
text-align:     center;
color:          aqua;
font-family:    가는으뜸체;
font-size:      24px;
position:       absolute;
visibility:     hidden;
z-index:        2;
}

.logo {
font-family:    times;
font-size:      72px;
color:          blue;
position:       absolute;
top:            0px;
left:           30px;
visibility:     visible;
z-index:        1;
}

.desc {
text-align:     center;
font-family:    가는으뜸체;
font-size:      16px;
color:          white;
position:       absolute;
top:            220px;
left:           40px;
width:          400px;
visibility:     hidden;
z-index:        0;
}

BODY {
background:     #000000;
}

A {
color:          lime;
}

A:HOVER {
        color : yellow;
        text-decoration : none;
        
}
</STYLE>
<SCRIPT LANGUAGE = "JavaScript">


    /* Show an object */
    function showObject(object) {
        object.visibility = VISIBLE;
    }

    /* Hide an object */
    function hideObject(object) {
        object.visibility = HIDDEN;
    }

    /* Slide the logo from top to middle */
    function slideLogo(from, to) {
            if (from < to) {
                company.top = (from += 10);
                setTimeout('slideLogo(' + from + ',' + to + ')', 75);
            }
            else initObjects();
    }

    /* Rotate selected objects */
    function rotateObjects() {
            for (var i = 0; i < pos.length; i++) {
                pos[i] += inc; objects[i].visibility = 'visible';
                objects[i].left = (r * Math.cos(pos[i])) + xoff
                objects[i].top = (r * Math.sin(pos[i])) + yoff;
            }
        rotateTimer = setTimeout("rotateObjects()", 70);
    }

     /* Initialize selected objects for rotation */
     function initObjects() {
        /* Here is the array of HTML elements that will be rotated, from fly1 to fly4
           Just put the shortcut variables to the HTML elements in this little array
           and they will be rotated automatically */
        objects = new Array(fly1, fly2, fly3, fly4);
        pos = new Array();
        pos[0] = 0;
            for (var i = 1; i < objects.length; i++) {
                pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
            }
        rotateObjects();
    }

/* Variables for rotating objects */
    var objects;
    var pos;
    var r = 160;        // radius
    var xoff = 180;     // x offset
    var yoff = 170;     // y offset
    var pi = Math.PI;   // get pi
    var inc = pi / 180; // degrees per rotation cycle
    var objects;        // objects to be rotated
    var pos;            // position for objects


</SCRIPT>


</HEAD>

<BODY BGCOLOR="#ffffff" link="green" TEXT="lime">

<DIV ID = "fly1" CLASS = "fly">
<A HREF = "http://bora.dacom.co.kr/~adamite/home.htm" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">스크립트</A>
</DIV>

<DIV ID = "fly2" CLASS = "fly">
<A HREF = "http://bora.dacom.co.kr/~adamite/home.htm" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">자바데포</A>
</DIV>

<DIV ID = "fly3" CLASS = "fly">
<A HREF = "http://bora.dacom.co.kr/~adamite/home.htm" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">애플릿</A>
</DIV>

<DIV ID = "fly4" CLASS = "fly">
<A HREF = "http://bora.dacom.co.kr/~adamite/home.htm" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">dhtml</A>
</DIV>

<DIV ID = "company" CLASS = "logo">Welcome to Java Depot</DIV>

<DIV ID = "desc1" CLASS = "desc">
500 여개의 자바스크립트 예제
</DIV>

<DIV ID = "desc2" CLASS = "desc">
Click to Enter 클릭하세요
</DIV>

<DIV ID = "desc3" CLASS = "desc">
다양한 애플릿 예제
</DIV>

<DIV ID = "desc4" CLASS = "desc">
다이나믹 HTML / 확장 TAG 등
</DIV>


<SCRIPT LANGUAGE = "JavaScript">


    /* Simple version detection */
    var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

/* They can be used in place
       of hidden and visible because on occasion Navigator has problems with the two */
    var HIDDEN = (isNS) ? 'hide' : 'hidden';
    var VISIBLE = (isNS) ? 'show' : 'visible';

    /* Create shortcut variables for different absolutely positioned elements */
    var fly1 = (isNS) ? document.fly1 : document.all.fly1.style;
    var fly2 = (isNS) ? document.fly2 : document.all.fly2.style;
    var fly3 = (isNS) ? document.fly3 : document.all.fly3.style;
    var fly4 = (isNS) ? document.fly4 : document.all.fly4.style;
    var company = (isNS) ? document.company : document.all.company.style;
    var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;
    var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;
    var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;
    var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;

    /* Begin the sliding of the logo */
    slideLogo(0, 140);


</SCRIPT>