네이티브 js 페이드 기능 캡슐화 기반(IE와 호환 가능)
- 高洛峰원래의
- 2016-12-09 15:08:341006검색
개발 과정에서 페이드인 및 페이드아웃 효과를 원할 경우 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('box');
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['opacity']*100;
}
else{//其他浏览器
opa = getComputedStyle(box,false)['opacity']*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='alpha(opacity:'+(opa+speed)+')';
}
//目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
//设置透明度直接为目标值，同时清除定时器
else{
box.style.opacity=target/100;
box.style.filter='alpha(opacity:'+target+')';
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 브라우저에서 얻을 수 있음). 다음에 이동할 때 현재 투명도입니다. 투명도, 그렇지 않으면 초기 불투명도 값을 얻습니다). 그럼 애니메이션과 같은 문제 아닌가요?