모두가 블라인드를 보았습니다! 그림과 같이 :
원칙:
그림에서 볼 수 있듯이 중공 격자는 각 Li와 같습니다. 상대 위치 지정 속성을 설정하고 오버플로를 설정합니다. 검은 블록은 LI의 높이가 2 배인 Li Child 요소이며 절대 속성을 설정합니다. 변경 사항을 얻기 위해 최고 가치를 변경하고 싶습니다! (오른쪽 상단의 여분의 블록은이 그림과 관련이 없습니다)
레이아웃 분석 :
Top은 변경할 가치가 있습니다! 기본 상단 = 0이 0이면 "1 층 위층"이 표시됩니다. Top = -40px 인 경우 Li의 자식 요소는 40px까지 이동합니다. 현재 표시된 내용은 "1 층 아래층"입니다. p- 요소 층 div
JS 분석 :
1. 여러 타이머를 켜서 효과를 달성하십시오
2. 반대 방향으로 실행하십시오
3. 여러 운동 세트를 수행하십시오
4. 축적은 비틀 거리는 느낌을줍니다
5. 시간 간격 애니메이션을 생성합니다
JS 코드는 다음과 같습니다.
<cript> wind var oul2 = document.getElementById ( 'ul2'); Toshow (OUL); // settimeout (function () {toshow (oul2);}, 4000); 함수 toshow (obj) {var adiv = obj.getElementsByTagName ( 'div'); var inow = 0; var timer = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); function tochange () {timer = setInterval (function () {if (inow == adiv.length) {clearinterval (timer); inow = 0; bbtn =! bbtn;} else if (bbtn) {adiv [inow], {top : 0}, function () {var p = vare (var p =); i = 0; i ++) {red ++}; }}}}; // 모션 프레임 함수 startMove (obj, json, endfn) {clearinterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; for (var attr in json) {var icur = 0; icur = parseint (getstyle (obj, attr)) || 0; var ispeed = (json -icur)/8; ispeed = ispeed> 0? math.ceil (ispeed) : Math.floor (ispeed)); if! = json [att } // 비 라인 스타일 함수 GetStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }} </script>주소 다운로드 : JS가 블라인드를 달성합니다
위의 내용은이 기사에 관한 모든 것이며, 모든 사람들이 JS 블라인드의 효과를 실현하는 법을 배우는 것이 도움이되기를 바랍니다.