개발 과정에서 페이드인 및 페이드아웃 효과를 원할 경우 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 브라우저에서 얻을 수 있음). 다음에 이동할 때 현재 투명도입니다. 투명도, 그렇지 않으면 초기 불투명도 값을 얻습니다). 그럼 애니메이션과 같은 문제 아닌가요?