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

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()

효과 시연 :

<style> .text {width:100px;height:100px;background:red;display:inline-block;} </style><div class="text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})"> </div><div class="text" onclick="opacity(this,{duration:4.0,from:1.0,to:0})"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

< ;div class=" text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})">