집 > 기사 > 웹 프론트엔드 > 기본 JS 캡슐화 페이드인 및 페이드아웃 효과 기능의 단계에 대한 자세한 설명

기본 JS 캡슐화 페이드인 및 페이드아웃 효과 기능의 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-10 10:38:541553검색

이번에는 기본 JS 캡슐화된 페이드인 및 페이드아웃 효과 기능의 단계에 대해 자세히 설명합니다. 실제 사례를 살펴보겠습니다. js의 그라데이션 표시와 사라짐에 대해 말하면 대부분의 친구들은 JQuery의 fadeIn(), fadeOut() 또는 fadeToggle()을 생각할 것입니다. 하지만 단지 그러한 효과를 도입하기 위해 거대한 JQuery 라이브러리를 호출한다면 어떻게 될까요? 즉, 몇 가지 기능을 구현하기 위해 네이티브 js를 사용하여 실력을 향상시켰습니다~

그래서 순수 js 코드에서 페이드인과 페이드아웃을 작성할 때의 효과를 간략하게 연구해보았습니다.

오류가 있으면 댓글로 지적해주시면 제가 직접 수정하도록 하겠습니다

(1) FadeIn 페이드인 기능페이드인과 페이드아웃 효과는 실제로 setInterval()입니다. 위 루프의

DOM 작업

은 요소 개체 노드의 투명도를 변경하여 이 효과를 얻을 수 있습니다. 그래서 우리는 setInterval(), 불투명도 및 속도라는 두 가지 필수 항목을 추출합니다.

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 node

투명성 함수 속성을 설정합니다. 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(&#39;button&#39;)[0];
 let btn2 = document.getElementsByTagName(&#39;button&#39;)[1];
 btn.onclick = () => {
  let fade = new Fade('p1');
 fade.fadeIn();
 };
 btn2.onclick = () => {
  let fade = new Fade('p1');
  fade.fadeOut();
 }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!