잡다한 일상사 WebJoy.kr :: 빙글빙글 회전하는 링크(메뉴)

빙글빙글 회전하는 링크(메뉴)

WEB/HTML/Css/Script 2007/06/29 13:54 by 아쿠아바다

사이트 설명을 넣으세요^^

마우스 온하면 스톱하는 부분 수정 필요함..

소스

<STYLE>
.move {
text-align: center;
color:    #0066FF;
font-family:    굴림;
font-size:    12px;
position: absolute;
visibility: hidden;
z-index:    2;
}
.type {
font-family:    굴림;
font-size:    18px;
color:    #333333;
position: absolute;
top:    0px;
left: 70px;
visibility: visible;
z-index:    1;
}
.call {
text-align: center;
font-family:    굴림;
font-size:    12px;
color:    red;
position: absolute;
top:    170px;
left: 0px;
width:    400px;
visibility: hidden;
z-index:    0;
}
BODY {
background: #FFFFFF;
}
A {
color:    #0066FF;
}
A:HOVER {
color : green;
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 type from top to middle */
function slidetype(from, to) {
if (from < to) {
company.top = (from += 10);
setTimeout('slidetype(' + from + ',' + to + ')', 50);
}
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() {
//메뉴를 추가할 경우 아래의 규칙에 맞게 Array 를 추가하세요
objects = new Array(move1, move2, move3, move4, move5);
   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 = 100;    // 원의 반지름
var xoff = 100; // 화면 왼쪽으로 부터의 위치
var yoff = 170; // 화면 위쪽으로 부터의 위치
var pi = Math.PI;
var inc = pi / 180; // 수치가 낮을수록 회전속도가 빠름
var objects;
var pos;    // position for objects
</SCRIPT>

<DIV ID = "move1" CLASS = "move">
<A HREF = "" onMouseOver = "showObject(call1)"
onMouseOut = "hideObject(call1)">링크1</A>
</DIV>

<DIV ID = "company" CLASS = "type"><b>메인</b></DIV>

<DIV ID = "call1" CLASS = "call">
사이트 설명을 넣으세요^^
</DIV>

<SCRIPT LANGUAGE = "JavaScript">
/* Simple version detection */
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >=
5);
/* 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 move1 = (isNS) ? document.move1 : document.all.move1.style;
var move2 = (isNS) ? document.move2 : document.all.move2.style;
var move3 = (isNS) ? document.move3 : document.all.move3.style;
var move4 = (isNS) ? document.move4 : document.all.move4.style;
var move5 = (isNS) ? document.move5 : document.all.move5.style;
var company = (isNS) ? document.company : document.all.company.style;
var call1 = (isNS) ? document.call1 : document.all.call1.style;
var call2 = (isNS) ? document.call2 : document.all.call2.style;
var call3 = (isNS) ? document.call3 : document.all.call3.style;
var call4 = (isNS) ? document.call4 : document.all.call4.style;
var call5 = (isNS) ? document.call5 : document.all.call5.style;
/* Begin the sliding of the type */
slidetype(0, 140);
</SCRIPT>

'WEB > HTML/Css/Script' 카테고리의 다른 글

테두리가 둥근 테이블 생성 (0)	2007/06/29
투명한 아이프레임 만들기 (0)	2007/06/29
빙글빙글 회전하는 링크(메뉴) (0)	2007/06/29
Infinite Menu 다이나믹 팝업 메뉴 (0)	2007/06/29
부드러운 이미지 전환 효과 (0)	2007/06/29
이미지/자바스크립트를 이용한 메뉴 구현 (0)	2007/06/29