js의 그래디언트 표시 및 사라짐에 대해 말하면 대부분의 친구들은 JQuery의 fadeIn(), fadeOut() 또는 fadeToggle()을 생각할 것입니다. 하지만 단지 그러한 효과를 도입하기 위해 거대한 JQuery 라이브러리를 호출한다면 어떻게 될까요? 즉, 몇 가지 기능을 네이티브 js를 사용하여 구현하면서 실력이 향상되었습니다~
그래서 순수 js 코드에서 페이드인, 페이드아웃을 작성할 때의 효과에 대해 간략하게 연구해보았습니다.
오류가 있으면 댓글로 지적해주시면 제가 직접 수정하도록 하겠습니다
(1) FadeIn 페이드인 기능
페이드인과 페이드아웃 효과는 실제로 setInterval()입니다. add 이 효과는 이전 루프의 DOM 작업을 통해 요소 개체 노드의 투명도를 변경하여 얻을 수 있습니다.
그래서 우리는 setInterval(), 불투명도 및 속도라는 두 가지 필수 항목을 추출합니다.
속도: 불투명도 값의 부동 소수점 값이 0에서 1로 변경되도록 설정하는 속도입니다.
페이드 인 논리: 불투명도 값의 부동 소수점 값이 0에서 1로 변경됩니다.
먼저 코드 구현을 살펴보겠습니다!
html:
<p id="p1"></p> <span id="span1">123</span> <button>fadein</button> <button>fadeOut</button>
css style
<style> p { width: 100px; height: 100px; background-color: #1d7db1; opacity:0; } </style>
먼저 fadeIn 함수의 첫 번째 버전을 작성하는 방법을 살펴보겠습니다. 먼저 구현 아이디어를 이해하세요
function fadeIn(ele, speed) { let num = 0; let time = setInterval(() => { num += speed; ele.style.opacity = num / 100; if (num >= 100) { clearInterval(time); // 清楚定时器 } }, 30); } }
이 효과가 일시적으로 어떤 것들은 그렇게 간단하지 않습니다. 여러 트리거 효과가 발생하면 setInterval이 동시에 여러 번 사용되어 일부 번거로운 BUG가 발생합니다.
이 문제를 해결하기 위한 해결책이 현재 있습니다. 즉, setInterval이 여러 번 트리거되는 것을 방지하기 위해 전역 상태를 추가하는 것입니다.
let Fadeflag = true; function fadeIn(ele, speed) { let num = 0; if (Fadeflag) { let time = setInterval(() => { num += speed; Fadeflag = false; ele.style.opacity = num / 100; if (num >= 100) { clearInterval(time); Fadeflag = true; } }, 30); } }
호환성 문제! ! !
먼저 코드를 보세요
set: function(elem, num) { elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')'; }
참고: 코드는 ff 및 GG와 호환되는 표준으로 ie를 사용하기 때문에 num/100을 설정합니다.
js에서 DOM 노드 투명도를 설정하는 함수 속성: filter= "alpha(opacity=" + value+ ")" (ie와 호환 가능)
ie의 필터 범위는 0~100
opacity=value/100(FF 및 GG와 호환 가능)입니다.
FF와 GG의 불투명도는 0~1입니다(즉, 필터 범위와 호환되도록 num/100을 사용합니다)
(2) FadeOut 기능
speed: 이것은 불투명도를 설정한 값 부동 소수점 값이 1에서 0으로 변경되는 속도(호환성을 고려해야 함)
페이드 아웃 논리: 불투명도 값이 부동 소수점 값에서 1에서 0으로 변경됩니다.
캡슐화된 함수
(function() { let fadeFlag = true; function Fade(selector) { this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector); } Fade.prototype = { constructor: Fade, setOpacity: (elem, opacity) => { // 兼容ie10— elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')': elem.style.opacity = opacity / 100; return true; }, setOpacity: function(num) { this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; }, fadeIn: function(speed, opacity){ /* speed ==>淡入的速度,正整数(可选); opacity ==>淡入到指定的透明度,0~100(可选); */ speed = speed || 2; opacity = opacity || 100; let num = 0; // 初始化透明度变化值为0 if (fadeFlag) { let time = setInterval(() => { num += speed; fadeFlag = false; this.setOpacity(num); this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; if (num >= opacity) { clearInterval(time); fadeFlag = true; } }, 20); } }, fadeOut: function(speed, opacity) { /* speed ==>淡入的速度,正整数(可选); opacity ==>淡入到指定的透明度,0~100(可选); */ speed = speed || 2; opacity = opacity || 0; let num = 100; // 初始化透明度变化值为0 if (fadeFlag) { let time = setInterval(() => { num -= speed; fadeFlag = false; this.set(num); this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')'; if (num <= opacity) { clearInterval(time); fadeFlag = true; } }, 20); } } }; window.Fade = Fade; })();
테스트 예:
let btn = document.getElementsByTagName('button')[0]; let btn2 = document.getElementsByTagName('button')[1]; btn.onclick = () => { let fade = new Fade('p1'); fade.fadeIn(); }; btn2.onclick = () => { let fade = new Fade('p1'); fade.fadeOut(); }
관련 권장 사항:
jQuery 구현의 IE6 페이드 인 및 페이드 아웃 프롬프트 기능 효과 예
페이드 인 디스플레이 CSS 페이드 아웃 전환 효과 예
h5+css3 이미지 플라이인 및 페이드 아웃 효과를 구현하는 코드 예
위 내용은 JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!