>  기사  >  웹 프론트엔드  >  네이티브 js 페이드 기능 캡슐화 기반(IE와 호환 가능)

네이티브 js 페이드 기능 캡슐화 기반(IE와 호환 가능)

高洛峰
高洛峰원래의
2016-12-09 15:08:34991검색

개발 과정에서 페이드인 및 페이드아웃 효과를 원할 경우 jQuery의 fadeTo() 메서드를 완전히 사용할 수 있습니다. 그러나 우리의 목표는 단지 ​​그것을 사용하는 것이 아니라 프로그램의 기본 논리를 이해하는 것입니다. 이 기사에서는 주로 기본 자바스크립트를 사용하여 페이드인 및 페이드아웃 효과를 구현합니다.

프레임워크를 구축하는 것은 기본적으로 어렵지 않습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>透明度函数的封装</title>
  <style type="text/css">
   #box{
    width: 200px;
    height: 200px;
    background: red;
    margin: 50px auto;
    opacity: .3;
    filter: alpha(opacity:30);
   }
  </style>
 </head>
 <body>
  <div id="box"></div>
  <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

javascript 부분을 작성할 때 가장 어려운 점은changeOpacity() 함수입니다.

window.onload = function (){
 var box = document.getElementById(&#39;box&#39;);
 box.onmouseover = function (){
  changeOpacity(this,100);
 }
 box.onmouseout = function (){
  changeOpacity(this,30);
    
 }
}
/**
 *
 * @param {Object} box 要变化透明度的元素
 * @param {Object} target 透明度的目标值(100为最高)
 */
function changeOpacity(box,target){
 var opa;
 var speed;
 if(box.currentStyle){
  //判断浏览器类型,此类型为IE浏览器,即使IE不支持opacity属性,但是仍然可以获取值
  opa = box.currentStyle[&#39;opacity&#39;]*100;
 }
 else{//其他浏览器
  opa = getComputedStyle(box,false)[&#39;opacity&#39;]*100;
 }
 //透明度每次变化的值(步长),根据目标值和当前值的差来决定步长的正负
 target-opa>=0?speed=1:speed=-1;
 clearInterval(box.timer);
 box.timer = setInterval(function (){
  //目标值和当前值差值的绝对值大于等于步长的绝对值,设置透明度为当前值加步长
  if(Math.abs(target-opa)>=Math.abs(speed)){
   box.style.opacity=(opa+speed)/100;
   box.style.filter=&#39;alpha(opacity:&#39;+(opa+speed)+&#39;)&#39;;
  }
  //目标值和当前值差值的绝对值小于步长的绝对值,剩余的距离一步到位,
  //设置透明度直接为目标值,同时清除定时器
  else{
   box.style.opacity=target/100;
   box.style.filter=&#39;alpha(opacity:&#39;+target+&#39;)&#39;;
   clearInterval(box.timer);
  }
  //直接对透明度参数进行加步长的运算,避免每次都要获取当前透明度
  opa=opa+speed;
 },30);
}

이 투명도 기능의 원리는 일반적으로 모션 기능과 동일합니다. 세 단계로 요약됩니다.
1. 현재 값을 가져오고 목표 값과 현재 값을 기준으로 단계 크기를 결정합니다.
2. 매번 하나의 값을 변경하는 과정(그라디언트 애니메이션의 단계 길이) 및 투명도는 다른 값), 균일한 속도 애니메이션 및 투명도 단계 크기는 고정된 값입니다.
3. 목표 값에 도달하면 타이머가 지워지고 타이머가 종료됩니다.

그래서 원리를 이해하지 못한다면 자바스크립트 유니폼 애니메이션과 버퍼 애니메이션에 대한 다른 글을 읽어보시면 됩니다.
원리를 이해할 때 가장 큰 어려움은 현재의 투명성을 확보하는 것입니다(할당은 상대적으로 간단합니다). 투명도 값을 얻으려면 다음 두 가지 상황을 고려해야 합니다.

1. IE에서는 opacity 속성이 지원되지 않지만 box.currentStyle['opacity']를 통해 얻을 수 있습니다. 동시에 IE에서는 불투명도 값 변경으로 인해 투명도가 변경되지 않지만 작성 시 CSS에 불투명도 값도 기록합니다.
2. 다른 브라우저는 불투명도 속성을 지원하므로 쓰기 및 읽기에만 집중할 수 있습니다.

다음으로 IE 브라우저에서의 작업에 대해 자세히 설명하겠습니다.

우선 CSS 파일에는 우리 작업에 유용한 두 가지 속성 값이 있습니다. Operation: opacity: .3 ; filter: alpha(opacity:30); 분명히 필터 속성에서 불투명도 값을 얻는 것은 어렵지만(방법은 모르겠습니다!) currentStyle을 사용하면 상대적으로 간단합니다. 불투명도를 얻으려면. 그래서 테스트를 해보니 IE에서는 이 속성을 지원하지 않지만 이 속성 값을 읽고 쓰는 데에는 문제가 없어 문제가 해결되었습니다! 불투명도를 통해 현재 투명도를 읽을 수 있고 필터를 통해 투명도를 변경할 수 있습니다. 동시에 불투명도 값을 변경합니다(다른 브라우저와의 호환성뿐만 아니라 작성한 후에도 IE 브라우저에서 얻을 수 있음). 다음에 이동할 때 현재 투명도입니다. 투명도, 그렇지 않으면 초기 불투명도 값을 얻습니다). 그럼 애니메이션과 같은 문제 아닌가요?


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