Javascript 동적 스케일링 페이드 아웃 및 페이드 인_javascript 기술

//간격 변수
var inl = [];
//원래 투명도
var opa = 100;//브라우저 결정
var ie = navigator.appName == "Microsoft Internet Explorer " ? "Microsoft Internet Explorer" : "";
//버튼 축소 및 열기
function gogo() {
speed = 50;
var mode;
//사각형 표시를 사용하여 축소 또는 확대 여부 결정
if(!$('tmp').style.display) {
mode = "-"
//표시가 정상인 경우 축소 간격을 설정합니다. 🎜> inl['suotu'] = setInterval("suodi('-')", 10);
}else {
mode = " "
//표시가 없으면 변경 먼저 디스플레이를 다시 정상으로 설정한 다음 확대되도록 간격을 설정합니다.
$('tmp').style.display = ""
inl['suotu'] = setInterval("suodi(' ')", 10 );
}
clearInterval(inl['dcdr']);
inl['dcdr'] = setInterval("dcdr('" 모드 "')", 10)
} 🎜>//페이드 아웃 및 인
function dcdr(op) {
//투명도 가져오기
opa = 정의(op, opa, 4, 0, 100)
//투명도 업데이트
ie ? $('tmp' ).style.filter = "alpha(opacity=" opa ")" : $('tmp').style.opacity = opa / 100>//투명도가 0보다 작거나 같거나 100보다 크거나 같음
if (opa <= 0 || opa >= 100) {
//중지 간격
clearInterval(inl['dcdr'] );
}
}
함수 정의(id , a, b, a2, a3) {
if(id == "-") {
a -= b; >if(a <= a2) {
a = a2
}
}else {
a = b
if(a >= a3) {
a = a3;
}
}
return a;
}
//축소 또는 확대
function suodi(opt) {
//속도가 1보다 큰 경우 , 계속해서 s로 나누면 1
speed = speed > 1 ? speed * 0.862 : 1
//높이 가져오기
var hw = 정의(opt, $(' tmp').clientHeight, speed, speed, 300);
//높이와 너비 설정
$('tmp').style.height = hw "px"
$('tmp'; ).style.width = hw "px";
//블록 높이가 속도보다 작은 경우
if ($('tmp').clientHeight <= speed) {
/ /숨기기 상자
$('tmp').style.display = "none";
//버튼 이름이 " 열기"로 변경되었습니다.
$('anniu').value = "열기"
//간격 닫기
clearInterval(inl['suotu']);
}else if($('tmp' ).clientWidth >= 300) {
//버튼 이름이 "로 변경되었습니다. 감소"
$('anniu').value = "감소";
//간격 닫기
clearInterval(inl ['suotu']);
}
}
/ /getElementById를 $
var $ = function($) {
return document.getElementById($);
}
//간격 변수
var inl = []; //원본 투명성
var opa = 100;
//브라우저 결정
var ie = navigator.appName == "Microsoft Internet Explorer" ? "":
// 축소 및 열기 버튼
function gogo() {
speed = 50;

var mode; (!$('tmp').style.display) {
                                                                                                                간격을 좁히도록 설정
inl['suotu'] = setInterval("suodi('-')",
}else; {
                                                                                                                   먼저 디스플레이를 다시 정상으로 변경하고, 그런 다음 간격을 확대하여 설정합니다.
$('tmp').style.display = ""
inl['suotu'] = setInterval("suodi( ' ')", 10) ;
}
clearInterval(inl['dcdr']);
inl['dcdr'] = setInterval("dcdr('" 모드 "')", 10) ;
}
//페이드 아웃 및 페이드 인
function dcdr(op) {
//투명도 가져오기
opa = Define(op, opa, 4, 0, 100); 🎜>
//투명도 업데이트
즉, $('tmp').style.filter = "alpha(opacity=" opa ")" : $('tmp').style.opacity = opa / 100 ;

//투명도가 0보다 작거나 같거나 100보다 크거나 같은 경우
if(opa <= 0 || opa >= 100) {
//중지 간격
clearInterval(inl['dcdr']);
}
}
function Define(id, a, b, a2, a3) {
if(id == "-") {
a -= b
if(a < ;= a2) {
a = a2
}
a = b; {
a = 3;
                                                                                     
//축소 또는 확대
function suodi(opt) {
//속도가 1보다 크면 계속해서 s로 나누고, 그렇지 않으면 1과 같습니다.
speed = speed > 1 ? 속도 * 0.862 : 1;

//높이 가져오기
var hw = 정의(opt, $('tmp').clientHeight, 속도, 300); 높이와 너비
$ ('tmp').style.height = hw "px";
$('tmp').style.width = hw "px"
// 블록이 속도보다 느립니다
if( $('tmp').clientHeight <= speed) {
//상자 숨기기
$('tmp').style.display = "none" ;
//버튼 이름이 "Open"으로 변경되었습니다.
$('anniu').value = "Open"
         //간격 닫기
clearInterval(inl['suotu']); 🎜>}else if($('tmp') .clientWidth & GT; = 300) {
// 버튼 이름이 "reduced"로 변경되었습니다.
$ ('anniu') 값 = "shrink";
// 간격 닫기
Clearinterval 'suotu']);
}
}
//getElementById를 $
var $ = function($) {
return으로 단순화 document.getElementById($);
}

;table style="border:1px solid #ccc" style="border:1px solid #ccc">

데모

썸네일 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <table style="border:1px solid #ccc"> <tr> <td><div style="position:absolute; font-family:'寰"></div></td> </tr> </table>