JQuery 플러그인_javascript 기술을 사용하지 않고 부동 창 효과를 표시하려면 클릭하세요.

이런 JQuery용 플러그인이 많이 있는데 저희 회사에서는 jQuery를 사용하지 않고 플러그인도 없어서 다른 분들은 어떻게 작성하셨는지 몰라서 그냥 제 생각대로 작성해보았습니다.

코드 직접 추가:

코드 복사 코드는 다음과 같습니다.

< !DOCTYPE html>

<제목>데모
< script type="text/javascript">
window.onload = function(){
var btn = document.getElementsByTagName('button')[0]; document.getElementsByTagName(' div')[0];
btn.onclick = function(){
event.cancelBubble =
var x = btn.offsetLeft - 15 'px'; var y = btn.offsetTop - 100 'px';
flt.style.top = x;
flt.style.display; }
document .onclick = function(){
flt.style.display = 'none'
}
}

type="text/ css">
*{
여백: 0px;
패딩: 0px;
}
div{
높이: 100px ;
배경: #33ccff;
위치: 절대
}

텍스트 정렬: 중앙; 🎜>
div li{
목록 스타일 유형: 없음
}
버튼{
왼쪽: 400px
위치: 절대; 🎜>}


클릭

;
< ;ul id="nav">

데모 1

데모 2>

데모 4
< ;li class=" item5">데모 5

/body>



로컬로 복사하여 테스트할 수 있습니다.

여기서 이야기할 두 가지 사항이 있습니다: cancelBubble. 제가 만든 효과는 버튼을 클릭하면 div가 표시되고 페이지의 아무 곳이나 클릭하면 div가 사라지는 것입니다. 그러나 JavaScript의 버블링 메커니즘은 버튼이 onclick 이벤트를 받은 후 버블링되고 dom은 onclick 이벤트를 가져옵니다. 이 경우 div를 사라지게 하는 onclick 이벤트와 충돌하므로 버블링을 중지하려면 event.cancelBubble = true; 코드 줄이 필요합니다. 그게 다입니다. 코드는 매우 간단합니다.