많은 플러그인이 있지만 함께 개선하기 위해 사용 가능한 플러그인이 많이 있지만 JavaScript 실제 시리즈의 일련의 예를 만들고 귀하와 공유했습니다. 좋은 제안이 있으시면 자녀를 오도하지 않도록 지적하십시오!
오늘은 첫 번째 전투입니다 : 컬렉션 및 릴리스 애니메이션 효과가있는 메뉴, 효과는 다음과 같습니다. (스타일은 약간 추악합니다 (-^-)).
(이 기사를 쓸 때 다른 편집자를 사용했기 때문에 당분간 데모 효과를 추가 할 수 없습니다. 여기 : 최종 완전한 코드 및 데모).
애니메이션 효과 : 마우스 호버는 모든 대상의 배경과 글꼴을 변경하고 마우스를 '홈페이지 내비게이션'으로 이동하고 아래 그룹화 메뉴를 표시합니다. 그룹화 메뉴에는 하위 메뉴가 있습니다. Zoom을 클릭하면 과도한 애니메이션 효과가 발생합니다! 또한 효과에 영향을 미치지 않고 내비게이션 메뉴 및 하위 메뉴를 추가 및 삭제할 수 있습니다!
그것을 달성하는 방법?
1 단계 : 메뉴를 구현하는 데 무엇을 사용합니까? HTML 코드는 JS 코드와 HTML 코드의 분리 원칙에 따라 다음과 같이 설계되었습니다! 여기서는 JS 코드를 볼 수 없습니다
이것은 스타일이 적용되기 전에 보이는 모습이었습니다. 아주 오래되었습니다! ! !
2 단계 : CSS 스타일. 마우스 호버는 모든 대상의 배경과 글꼴을 변경하고 CSS 전환 및 호버를 직접 사용합니다. 그러나 다른 모든 CSS 스타일 레이아웃을 나열하지는 않습니다. 직접 해보자. 다음 사항에주의하십시오.
#ul {.... z-index : 100; } #ul li {디스플레이 : 인라인-블록; 위치 : 상대; 상단 : 0; 왼쪽 : -25px; 너비 : 10%; 최소값 : 70px; 높이 : 30px; 텍스트 정렬 : 센터; 라인 높이 : 30px; 테두리 : 1px 단단한 회색; Border-Radius : 10px; 배경색 : Aliceblue; 커서 : 포인터; -webkit-transition : 모든 용이성 0.3s; -Moz-transition : 모든 편안함 0.3s; -ms-transition : 모든 편안함 0.3s; -o-ransition : 모든 편안함 0.3s; 전환 : 모든 용이성 0.3s; } #ul li : 호버 {배경 색 : 아쿠아 마린; Border-Radius : 10px; 색상 : 검은 색; 디스플레이 : 없음; 불투명도 : 0} .a {z -index : -1; 디스플레이 : 블록; ...}3 단계 : 이 단계는 핵심 요점입니다. 각 메뉴 옵션을 듣고 그룹화하는 이벤트를 추가하면 개인적으로 많은 문제가 있다고 생각하며 코드의 양은 더 크거나 작아야합니다. 요소에 모니터링을 추가하여이를 달성 할 수있는 방법이 있습니까?
버블 링 이벤트 메커니즘을 사용하여 답이 있어야합니다! 상위 요소 UL 태그에 이벤트 청취를 추가하고 청취 기능에서 트리거 이벤트의 요소 스타일을 직접 변경하면 간단합니다!
코드는 다음과 같습니다.
var ul = document.getElementById ( 'ul'); ul.addeventListener ( '마우스 오버', 리스너 1, false); ul.addeventListener ( '마우스 아웃', Listener2, false); ul.addeventListener ( 'Click', Listener3, False);
IE8 이하의 버전에는 addeventListener가 없으므로 호환하려는 경우 해당 첨부 보드 코드를 추가해야합니다.
4 단계 : 주인공이 나타납니다! Listener1, Listener2, Listener3 청취 기능을 구현하십시오.
먼저, 가장 간단한 Listener1 함수를 사용하겠습니다. 코드는 다음과 같습니다.
function learser1 (이벤트) {// event = event || window.event; // IE8 및 이전 버전과 호환 가능 var target = event.target || event.srcelement; // if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsByTagName ( 'div') [0]; div1.style.display = '블록'; var i = 0; var id; (function foo () {if (i> = 1) {cleartimeout (id); id = null; return; return;} i+= 0.2; div1.style.opacity = i; id = settimeout (function () {cleartimeout (id); foo ()}, 30);}) (); }}다시 말하지만, 모든 것은 IE8 및 기존 버전을위한 것입니다.
1. 이벤트는 대상 속성이 없기 때문에 해당 srcelement 속성 만
2. 그리고이 문장 이벤트 = 이벤트 || window.event; 실제로 여기서 생략 할 수 있습니다. ul.onmouseover = function () {} 또는 <ul onmouseover = 'func'>, ie8 및 기존 버전과 같은 등록 이벤트 청취를 설정하기 위해 속성을 사용하는 경우에만 Window.event를 통해서만 현재 이벤트 객체 만 얻을 수 있습니다.
자, 이제 현재 트리거 이벤트의 목표를 얻었으므로 상황이 훨씬 단순하여 자신과 친척을 바꿀 수 있습니다!
다음은 Listener2 함수이며, 마우스 아웃시 트리거되는 것은 주로 대상 자식 요소 Div를 조작하며 코드는 다음과 같습니다.
function learser2 (이벤트) {// event = event || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {var div1 = target.getElementsByTagName ( 'div') [0]; div1.onmouseOver = function () {div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; div1.style.opacity = 0; }; div1.style.display = 'none'; //이 그룹은 마우스가 위의 div1.style.opacity = 0에서 나오면 div1을 숨기는 것입니다. }}자, 지금까지 대부분의 효과가 달성되었으며 마지막 단계, 즉 주인공 No. 1 : Listener3 기능이 있습니다.이 기능은 주로 마우스를 클릭 할 때 스케일링 효과를 담당합니다!
구현 원칙 :
1. 함수 외부에서 bool 변수를 스위치로 정의하고 마우스를 클릭하고 끄기를 다시 클릭하십시오.
2. Settimeout을 사용하여 애니메이션 효과를 달성하고 하위 메뉴의 높이 및 불투명 속성 및 디스플레이 속성을 동적으로 변경하십시오.
전체 코드는 다음과 같습니다.
var bool = true; 함수 리스너 3 (이벤트) {var event = event || Window.event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var parent = target.parentElement; var adiv = parent.getElementsByClassName ( 'a-div') [0]; if (wind if (bool) {changeh = 0; 불투명도 = 0; target.innerhtml = 'Financial-'; (함수 show () {if (changeh> height) {cleartimeout (id); return} changeh += 5; 불투명도 += 0.06; //console.log('opacity:'+adiv.style.opacity +', height :' +adiv.style.height); adiv.style.height = changeh '; px'; hopacity; adiv.style.display = 'block'; bool = false; } else {changeh = 높이; 불투명도 = 1; target.innerhtml = 'Financial+'; (함수 hidden () {if (changeh <0) {cleartimeout (id); adiv.style.display = 'none'; return} changeh- = 10; 어리석은 -= 0.11; //console.log('opacity:'+adiv.style.opacity+', height : '+adiv.style.height); adiv.style.opacity = 불투명; settimeout (function (id); hidden (), 16.7); bool = true; }}}주목할만한 몇 가지 사항 :
1. Settimeout 및 종료의 ID를 지우는 것을 잊지 마십시오. 그렇지 않으면 Dead Loop은 if (Changeh <0) {Cleartimeout (id); adiv.style.display = 'none'; return}과 같습니다.
2. Settimeout의 지연 시간은 화면 60fps의 새로 고침 속도를 충족하기 때문에 16.7로 설정되어 편안하게 볼 수 있습니다.
3. 디버깅 과정에서 ChangeH 및 불투명도의 증분 및 감소 값을 설정할 때 디버깅을 용이하게하기 위해 인쇄해야합니다.
console.log ( '불투명도 :'+adiv.style.opacity+', 높이 :'+adiv.style.height);
4. 마지막으로 전체 메뉴를 구현하는 데 가장 중요한 것은 다음 문장입니다. 이 문장이 없으면 모든 기능을 완벽하게 구현할 수는 없습니다. 예를 들어 : 하위 메뉴 그룹을 클릭 한 다음 다른 그룹으로 이동하면 상황이 매우 다릅니다. Window.getComputedStyle을 사용하는 이유는 처음 열 때 처음 열 때 그룹을 클릭하면 응답하지 않기 때문입니다. 이벤트를 통해 처음 클릭 할 때 불투명도 값을 얻을 수 없기 때문입니다.
if (wind
그러나 getComputedStyle 방법은 IE9 아래에 지원되지 않으며 IE 요소 객체는 현재 스타일 속성을 갖습니다.
CSS 처리에 익숙하지 않은 경우 내 요약을 살펴보십시오. Native JS를 사용하여 CSS 스타일을 읽고 쓰는 방법에 대한 요약
settimeout () 메소드의 응용에 대해 더 알고 싶다면 다음을 살펴보십시오. Settimeout이 어떻게 작동하는지 정말로 알고 있습니까?
이벤트 처리 메커니즘의 경우 DOM의 이벤트 처리 개요 및 DOM의 이벤트 처리 원칙에 대한 포괄적 인 분석을 살펴볼 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.