javascript 제어 가능한 투명 효과 구현 code_javascript 기술-JS 튜토리얼-php.cn

javascript 제어 가능한 투명 효과 구현 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:37:16

원래의

1097명이 탐색했습니다.

CSS의 절대 위치 지정으로 인해 공간이 완전히 대체됩니다. 시작하기 전에 setTimeout(setInterval을 시뮬레이션하는 데 사용됨)의 재귀적 사용법을 연습해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

 
함수 텍스트(el){ 
 var node = (typeof el == "string")? document.getElementById(el) : el; 
var i = 0; 
varpeat = function(){ 
setTimeout(){ 
node .innerHTML = "" i "" 
i 
if(i <= 100){ 
setTimeout(arguments.callee, 100); 
 } 
},100) 
} 
repeat(); 
} 

가장 간단한 페이드인 효과인 노드를 변경해 보겠습니다. .innerHTML 라인을 투명도 설정에 추가합니다.

코드 복사 코드는 다음과 같습니다.

 
function fadeIn(el){ 
 var node = (typeof el == "string")? document.getElementById(el) : el; 
var i = 0; 
var fade = function(){ 
setTimeout(){ 
! "v1"? (node.style.filter="alpha(opacity=" i ")"): (node.style.opacity = i / 100) 
i 
if(i < ;= 100 ){ 
setTimeout(arguments.callee, 100); 
} 
},100) 
} 
fade() 
} 

그러나 이것은 완벽하지 않습니다. 왜냐하면 IE의 필터가 IE7에서 작동하지 않을 수 있고 hasLayout을 활성화하려면 Zoom=1을 사용해야 하기 때문입니다. 사용자 정의 가능한 매개변수를 추가하여 확장해 보겠습니다. 댓글이 이미 매우 자세해서 이해가 안 되시면 메시지로 물어보세요.

코드 복사 코드는 다음과 같습니다.

 
함수 불투명도(el){ 
 //필수 선택적 매개변수
var node = (typeof el == "string")? document.getElementById(el) : el, 
//선택적 매개변수
options = 인수[1] || , 
//변경 기간
duration = options.duration || 1.0, 
//처음의 투명성
from = options.from || 0.0, 
//처음의 투명성 end
to = options.to || 0.5, 
작업 = 1, 
init = 0 
if(to - from < 0){ 
작업 = -1, 
init = 1; 
} 
//내부 매개변수
//setTimeout 실행 간격, 단위 밀리초
var 빈도 = 100, 
//반복 호출 횟수 가정
count = 기간 * 1000 / 빈도, 
// 각 투명도의 증분을 계산합니다 
detal = Math.abs(to - from) /count, 
// 진행 중인 작업 수 
i = 0 ; 
var main = function(){ 
setTimeout(function(){ 
if(! "v1"){ 
if(node.currentStyle.hasLayout) node.style.zoom = 1 ; //필터 실패 방지
node.style.filter="alpha(opacity=" (init * 100 Operation * detal * i * 100).toFixed(1) ")" 
}else{ 
 node.style.opacity = (init 작업 * detal * i).toFixed(3) 
} 
node.innerHTML = (init 작업 * detal * i).toFixed(3) 
i 
if(i <= 개수){ 
setTimeout(arguments.callee, 빈도) 
} 
},주파수) 
} 
main() 