여기서 간단히 설명하자면, 3D 메뉴의 형태를 고려하지 않기 때문에, 구체적인 구현에서는 간단히 코사인 함수 를 사용했습니다. 메뉴의 전체 높이에 두 글자가 나타나도록 하려면 파도의 정점이 급한 느낌을 줍니다. 실제로 cos(x/K)의 K는 메뉴 항목 수 및 최대 글꼴 값과 관련된 함수여야 합니다. . 여기서는 간단히 상수로 설정했습니다. 전체 코드는 코드 복사 코드는 다음과 같습니다. <제목>메뉴 목록 <br>오버플로: 숨김; <br>} <br>본체 { <br>배경색: #111111; <br>색상: #eee; <br>ul#menu { <br>위치: 절대; <br>왼쪽: <br>} <br>li { <br>목록 스타일: 없음 <br>여백: 1px; { <br>텍스트 장식: 없음 <br>글꼴 계열: arial, helvetica, verdana, sans-serif <br>색상: #fff <br>글꼴 크기: 20px; > <br>var menu = function(){ <br>var $ = function(o){ <br>return document.getElementById( o); <br>} <br>varwords = document.getElementsByTagName('a'); <br>var size; //현재 글꼴 크기<br>var od;//동일한 대상인지 여부를 나타냅니다. >var max_size = 40, min_size = 20;//최대 글꼴 및 최소 글꼴<br>var go = 0;//go는 포인터 방향에 따른 애니메이션을 나타내고, dT는 포인터 이동 여부를 나타냅니다.<br>var xm, xmb , ym, ymb ;//포인터 이동 및 판단<br>/*Storage*/ <br>var addEvent = function(o, e, f){ <br>if (window.addEventListener) { <br>o.addEventListener (e, f, false); <br>} <br>else <br>if (window.attachEvent) { <br>o.attachEvent('on' e, f) <br>} <br>else { <br> return false; <br>} <br>} <br>var pxTop = function(o){//전체 문서를 기준으로 요소의 y 위치를 가져옵니다. <br>return o.offsetParent ? pxTop(o.offsetParent) : o.offsetTop; <br>} <br>addEvent(document, 'mousemove', function(e){ <br>e = e || window.event; <br>ym = (e .clientY || e.y) 문서 .body.scrollTop; <br>if (ym != ymb) { <br>ymb = ym; <br>} <br>od = e.target ? srcElement ? e.srcElement : null ); <br>}) <br>var getStyle = function(elem, name){ <br>if (elem.style[name]) { <br>return elem.style[name] ; <br>} <br>else <br>if (elem.currentStyle) { <br>return elem.currentStyle[name] <br>} <br>else <br>if (document.defaultValue && document.defaultValue .getCompulatedStyle) { <br> name = name.replace(/([A-Z])/g, "-$1") <br>nmae = name.toLowerCase() <br>var s = document.defaultValue.getComputeStyle (요소, 이름); <br>return s ? s : null; <br>} <br>else <br>return null <br>} <br>var test = function(){ <br>for (var i = 0; i <br>var p = 단어[i]; <br>size = parsInt(getStyle(p, "fontSize")); .className == "move" ) { <br>if (p != od) { <br>p.style.color = "white" <br>} <br>p.style.fontSize = Math.max( go * Math.cos(( ym - pxTop(p)) / (3 * max_size)), min_size) "px" <br>od.style.color = "노란색" <br>if (go <= max_size) { <BR>go = go 0.05;} <BR>} <BR>else { <BR>if (go >= min_size) { <br>go = go - 0.05; 🎜>p.style.fontSize = (Math.max(크기 - 0.05, min_size)) "px"; <br>p.style.color = "white" <br>} <br>} <br>} <br>return { <br> 테스트: 테스트 <br>} <br>}() <br>window.onload = function(){ <br>setInterval(menu.test, 16) <br>}<br> <본문> 스크립팅 javascript 웹 dhtml css ajax 프로그래밍 디자인 웹디자인 html dom webdev 참조 도구 tutorial xmlhttprequest 메뉴 xml 라이브러리 개발
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
