DOM에 대한 JavaScript 애플리케이션 분석 (5)_DOM

사실, 이것은 JS 튜토리얼의 범위에 포함되어서는 안 됩니다. IE6 이상 브라우저에서는 고정 속성을 지원해야 합니다. IE6만 지원하지 않습니다. 그래서 나는 망할 IE6을 선택했습니다. 여기서 튜토리얼을 하나 드리겠습니다. 게다가, 이 효과는 학생들의 컴퓨팅 능력을 발휘할 수도 있습니다. 미래의 많은 효과에는 컴퓨팅 성능이 필요합니다. ㅎㅎ
가운데 고정. 아니면 생각이 고정된 곳이면 거의 똑같습니다. 알고리즘이 명확해지기를 원하는 한. 효과는 쓰기 쉽습니다. 코드를 먼저 게시하세요

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body,div{padding:0px;margin:0px;} #gd{width:100px;height:100px;background:#F00;color:#FFF;} </style> <title> </title>고정중심 <div id="gd"> </div> 그냥 중간에 창 크기와 높이를 변경하도록 할게요. <div style="height:1200px;"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

var isIE=!!window .ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest
이 두 문장은 브라우저를 결정하는 데 사용됩니다. 이것이 Aajx의 방법입니다. 이해하기도 쉽습니다. 여기서는 더 이상 말하지 않겠습니다. 관심이 있으시면 온라인으로 검색하여 다양한 브라우저에 대해 알아볼 수 있습니다.

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document. getElementById("gd").offsetWidth)/2 document.documentElement.scrollLeft;
이 두 문장이 핵심입니다. 조심스럽게 말하고 싶습니다:
document.documentElement.clientHeight는 현재 브라우저 창의 높이를 가져오는 것입니다.
document.getElementById("gd").offsetHeight 이는 DOM 요소의 실제 높이를 가져오는 것입니다.
document.documentElement.scrollTop 스크롤 막대의 높이를 가져옵니다.

document.documentElement.clientHeight/2는 전체 브라우저 높이의 절반에서 document.getElementById("gd").offsetHeight/2는 DOM 요소 높이의 절반입니다. DOM 요소가 중앙에 위치해야 하는 현재 브라우저 상단으로부터의 상단 거리입니다. 그러나 이것은 막다른 골목일 뿐이다. 브라우저의 내용은 브라우저의 현재 창 높이보다 정확히 작거나 같을 수 없기 때문입니다. 콘텐츠가 특히 많을 때 스크롤 막대가 나타납니다. 다행스럽게도 스크롤 막대의 높이인 document.documentElement.scrollTop이 있습니다. 이를 추가하는 것은 실시간 DOM 요소를 중앙에 배치해야 할 때 현재 브라우저 상단으로부터의 최고 거리입니다. 물론 다음 문장의 알고리즘은 이 문장과 동일합니다. 모두가 그것을 이해하게 하십시오. 이것은 조금 깊은 인상을 줄 것입니다.

제 말을 이해하셨는지 모르겠습니다. 그림과 글로 설명해야 합니다. 하지만 제가 말한 내용은 아주 명확해야 한다고 생각합니다. 아직도 조금 혼란스럽다면. 종이에 그림을 그리는 것만으로도 이해할 수 있습니다.
거리가 분명하다면. 이제 마지막으로 한 가지만 하면 됩니다. 이때 스크롤 막대가 스크롤됩니다. 스크롤 높이가 실시간으로 추가됩니다. 그런 다음 즉시 t 및 l 값을 dom의 상단 및 왼쪽 속성으로 설정합니다. 이는 사용자에게 잘못된 인상을 줄 수 있습니다. 이 문제가 거기에서 해결되었다고 생각했습니다.

코드 복사

코드는 다음과 같습니다.

if(isIE6){
setInterval (function( ){
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop;
l = (document.documentElement.clientWidth - document. getElementById(" gd").offsetWidth)/2 document.documentElement.scrollLeft;
document.getElementById("gd").style.position = "absolute"
document.getElementById("gd").style. top = t "px";
document.getElementById("gd").style.left = l "px"
},1)

<script> window.onload = function(){ var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; if(isIE6){ setInterval(function(){ t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; document.getElementById("gd").style.position = "absolute" document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; },1) } else{ document.getElementById("gd").style.position = "fixed" document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; } } </script>
이 단락은 이를 위한 것입니다. if(isIE6)는 isIE6이 참인 경우입니다. 즉, IE6 브라우저인 경우입니다. setInterval(...,1)은 IE6 브라우저에서 1마이크로초마다 명령문을 실행하도록 시계를 설정합니다. 즉, t와 l의 값은 지속적으로 업데이트된다. 그런 다음 DOM 요소의 상단 및 왼쪽 속성을 지속적으로 지불합니다. 1마이크로초는 매우 빠릅니다. 사용자가 1마이크로초 안에 스크롤 막대를 당기는 것은 불가능합니다. 따라서 사용자가 아무것도 볼 수 없습니다. 거기서는 해결된 줄 알았는데. 물론 스크롤 이벤트 windon.onscroll을 설정할 수도 있습니다. 그것도 괜찮습니다. 하지만 그다지 좋은 것 같지는 않아요. 관심이 있으시면 연구해 보시는 것도 좋습니다. (장황한 말로 귀찮게 하지 마세요. 많은 것을 가르치는 것보다 제가 직접 연구해 보는 것이 더 도움이 될 것 같습니다.)

물론 IE6 이외의 브라우저에서는 고정 속성을 지원합니다. 이 명령문을 실행하면 됩니다.
document.getElementById("gd").style.position = "fixed"//dom 요소에 고정 속성 추가
document.getElementById("gd").style.top = t "px"; //초기화 중에 dom 요소에 중심 t 값을 설정합니다.
document.getElementById("gd").style.left = l "px";//초기화 중에 중앙에 있는 l 값을 dom 요소에 설정

알겠습니다. 이것이 바로 이 기사입니다. 딱 여기 중심이에요. 고정 하단 당기기, 고정 왼쪽 당기기 등도 있습니다. 원칙은 동일합니다. 단지 위쪽과 왼쪽의 계산이 다를 뿐입니다. 괜찮다면 직접 조사해 보세요. setInterval과 setTimeout이라는 두 가지 메소드도 있습니다. 이는 향후 튜토리얼에서 많이 사용될 것입니다.