Windows platform_javascript 기술의 상황에 맞는 메뉴 효과 코드를 시뮬레이션합니다.

코드 데모:

<meta charset="utf-8"> <title>제목 없는 문서</title> <style> <!-- body{background: #222; font: 14px 'Microsoft Yahei', Arial;} ul,li{list-style: none;padding:0;margin:0;} a{text-decoration: none;color:#000;} #wrap { width: 800px; height: 550px; border:1px solid #FF9C00; background: #F0E6AF; position:relative; margin: .5em auto; } #wrap ul { background: #eee; border: 1px solid #999; width: 150px; position: absolute; display: none; -moz-box-shadow: 3px 3px 9px #999; -webkit-box-shadow: 3px 3px 9px #999; -o-box-shadow: 3px 3px 9px #999; box-shadow: 3px 3px 9px #999; } #wrap ul li { border-bottom: 1px solid #ddd; line-height: 24px; } #wrap li.no {border-bottom: none;} #wrap ul li a { display: block; padding-left: .5em; } #wrap ul li a:hover { background-color: #FFBD00; } --> </style> <div id="wrap"> <p> </p>마우스 우클릭을 하면 효과를 볼 수 있어요~<ul id="menu"> <li> <a href=""></a>실행 취소</li> <li> <a href=""></a>재작업</li> <li> <a href=""></a>복사</li> <li> <a href=""></a>붙여넣기</li> <li> <a href=""></a>대소문자 변환</li> <li> <a href=""></a>들어가세요 </li> <li> <a href=""></a>맞춤법 검사</li> <li> <a href=""></a>새로운</li> <li> <a href=""></a>맞춤형</li> <li> <a href=""></a>그래픽 옵션</li> <li class="no"> <a href=""></a>닫기</li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

구조 :

코드 복사

코드는 다음과 같습니다.

• 취소
a href=""> 다시 실행

• 복사
붙여넣기

• 대소문자 변환
; li>입력

• 맞춤법 검사
🎜>
• 신규


• 맞춤형
• 그래픽 옵션


• 닫기

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function $(id) {
return document.getElementById(id);
};

var EventUnit = {
addHandler: function(element, type, handler) {//添加事件处理程序
if(element.addEventListener) {
element.addEventListener(type, handler) , 거짓);
} else if(element.attachEvent) {
element.attachEvent('on' 유형, 핸들러);
} else {
요소['on' 유형] = 핸들러;
};
},
getEvent: function(event) {
return event ? 이벤트 : window.event;
},
preventDefault: function(event) {//取消事件默认动작
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
};
}
}

EventUnit.addHandler(window, 'load', function() {
var Wrap = $('wrap');
var menu = $(' menu');
var menuStyle = menu.style.display;
var x = Wrap.offsetLeft Wrap.clientWidth, y = Wrap.offsetTop Wrap.clientHeight;
var w = 0, h = 0;
var left = 0, top = 0;

EventUnit.addHandler(wrap, 'contextmenu', function(event) {
event = EventUnit.getEvent(event);
EventUnit. PreventDefault(event);

menu.style.display = 'block';
w = menu.clientWidth;
h = menu.clientHeight; >= w) ? event.clientX - Wrap.offsetLeft : event.clientX - Wrap.offsetLeft - w;
top = (event.clientY h <= y) ? event.clientY - Wrap.offsetTop : 이벤트. clientY - Wrap.offsetTop - h;
menu.style.left = 왼쪽 'px';
menu.style.top = 상단 'px'
}); addHandler(document, 'click', function() {
menu.style.display = menuStyle;
})
});