>  기사  >  웹 프론트엔드  >  JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.

JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.

小云云
小云云원래의
2018-03-20 09:13:022094검색

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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
}

참고: 코드는 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 == &#39;Object&#39; ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = &#39;alpha(opacity = &#39;+ opacity +&#39;)&#39;:  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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
   },
    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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          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 = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          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(&#39;p1&#39;);
 fade.fadeIn();
 };
 btn2.onclick = () => {
  let fade = new Fade(&#39;p1&#39;);
  fade.fadeOut();
 }

관련 권장 사항:

jQuery 구현의 IE6 페이드 인 및 페이드 아웃 프롬프트 기능 효과 예

페이드 인 디스플레이 CSS 페이드 아웃 전환 효과 예

h5+css3 이미지 플라이인 및 페이드 아웃 효과를 구현하는 코드 예

위 내용은 JavaScript는 페이드인 및 페이드아웃 효과를 사용하여 함수를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.