JavaScript 및 CSS 복습(2)_javascript 기술

visible: 일반적인 흐름에서 요소의 위치와 공간을 유지하면서 요소의 가시성을 전환합니다. 여기에는 표시(기본값) 및 숨김(보이지 않음)의 두 가지 값이 있습니다.
예:

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

안녕하세요 John, 오늘 잘 지내세요?

브라우저 상태: 안녕하세요 John, 잘 지내세요? today? 그런 다음 John의 b 가시성을 숨김으로 설정하면 다음과 같이 됩니다.
안녕하세요, 오늘은 잘 지내시나요?
디스플레이: 요소 레이아웃을 제어할 수 있는 더 풍부한 선택권을 제공합니다. 인라인, 블록 또는 없음일 수 있습니다(문서에서 요소를 완전히 숨기므로 요소가 문서에서 삭제된 것과 동일한 모양이 됩니다). 위의 예는 여전히 display:none을 사용하는 경우입니다. 그러면 결과는
안녕하세요, 오늘 잘 지내시나요?
다음은 책에 있는 요소를 표시하고 숨기는 두 가지 간단한 함수입니다

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

//표시를 사용하여 요소 숨기기
function hide(elem) {
//요소 표시의 현재 상태를 알아봅니다
var curDisplay = getStyle (elem, 'display');
//디스플레이 상태 기록
if(curDisplay != 'none')
elem.$oldDisplay = curDisplay
//Set; 없음으로 표시
elem.style.display = 'none';
}
//표시를 사용하여 요소 표시
function show(elem) {
//표시 속성을 해당 항목으로 설정 원래 값
elem.style.display = elem.$oldDisplay || ' ';
}

다음으로 요소에 매우 멋진 효과를 추가할 수 있는 투명도에 대해 살펴보겠습니다. ... 요소의 투명도를 설정하는 아래 함수를 살펴보세요.

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

//요소의 투명도 설정(레벨 0부터) -100)
function setOpacity(elem, level) {
//filters 속성이 존재하는 경우 IE입니다.
if(elem.filters) {
elem.style.filters = 'alpha( opacity=' level ')';
} else { // 그렇지 않으면 W3C의 불투명도 속성을 사용합니다.
elem.style.opacity = level / 100
}

예 요소의 위치, 크기 및 가시성을 조정하는 이러한 방법을 사용하여 이를 결합하여 애니메이션을 만들 수 있습니다.

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

function SlideDown(elem) {

//Start 0 높이에서 Slide
elem.style.height = '0px'
//요소를 먼저 표시합니다(단, 높이가 0이므로 볼 수 없음)
show(elem); >//요소의 전체 잠재적 높이 찾기
var h = fullHeight(elem)
//1초 안에 20프레임 애니메이션을 수행합니다.
for(var i = 0; i < = 100; i = 5) {
//올바른 'i'를 유지할 수 있도록 보장하는 클로저 함수
(function() {
var pos = i;
//시간 초과 설정 지정된 시점에 이동할 수 있도록
setTimeout(function() {
//요소의 새 높이 설정
elem.style.height = (pos / 100) * h 'px' ;
}, (pos 1) * 10);
})();
}
}


여기에는 폐쇄라는 개념이 있습니다. 이해하기 어렵습니다. 더 많은 것을 알고 싶으면 정원의 친구들이 Google에 접속할 수 있으므로 여기서는 논의하지 않겠습니다.

다음으로 setOpacity 함수를 사용하여 "페이드 인" 함수를 작성합니다.

코드 복사 코드는 다음과 같습니다. :function fadeIn(elem) {

//투명도 0부터 시작

setOpacity(elem, 0)
//요소를 먼저 표시합니다(하지만 볼 수는 없습니다. 투명도는 0)
show(elem);
//1초 안에 20프레임 애니메이션을 실행합니다.
for(var i = 0; i < 100; i = 5) {
//올바른 'i'를 유지할 수 있는 클로저 함수 보장
(function(){
var pos = i;
//지정된 이벤트 내에서 실행될 수 있도록 타임아웃 설정
setTimeout(function () {
setOpacity(elem, pos);
}, (pos 1) * 10)
})();
}
}


코드의 정확성을 보장하기 위해 책에서 약간의 오류를 발견했기 때문에 코드를 작성한 후 테스트했습니다. 방금 위의 SlideDown 메소드 테스트를 마쳤고 var h = fullHeight(elem); 함수 내용의 첫 번째, 그렇지 않으면 효과가 없습니다....

두 번째 부분의 복습은 여기까지입니다. 천천히 소화하고, 무언가를 배우려고 서두르지 마세요.