KoXo 자바스크립트 - 필터(filter)

미닫이 문을 닫고 여는 것과 유사한 움직임으로 개체의 내용을 새로이 표시한다.

애트리뷰트	속성	설명
duration	Duration	변환이 완성되는 시간의 길이를 밀리초 단위로 반환하거나 설정한다.
enabled	Enabled	필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
motion	Motion	개체의 내용의 변환을 안에서 밖으로하는가, 밖에서 안으로 하는가를 반환하거나 설정한다.
orientation	Orientation	필터 효과를 수평으로 할 것인가 수직으로 할 것인가를 반환하거나 설정한다.
	Percent	정지된 필터 출력을 캡쳐할 완성도 백분율 포인트를 반환하거나 설정한다.
	status	변환의 상태를 반환한다.

애트리뷰트

속성

설명

duration

Duration

변환이 완성되는 시간의 길이를 밀리초 단위로 반환하거나 설정한다.

enabled

Enabled

필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능

motion

Motion

개체의 내용의 변환을 안에서 밖으로하는가, 밖에서 안으로 하는가를 반환하거나 설정한다.

orientation

Orientation

필터 효과를 수평으로 할 것인가 수직으로 할 것인가를 반환하거나 설정한다.

Percent

정지된 필터 출력을 캡쳐할 완성도 백분율 포인트를 반환하거나 설정한다.

status

변환의 상태를 반환한다.

메서드	status	설명
apply	1	변환을 위해 원본 개체의 내용을 캡쳐(capture)한다.
play	2	변환하며 디스플레이 한다.
stop	0	변환의 반복을 중지한다.

메서드

status

설명

apply

변환을 위해 원본 개체의 내용을 캡쳐(capture)한다.

play

변환하며 디스플레이 한다.

stop

변환의 반복을 중지한다.

필터 표시창

<SCRIPT>
var clickBut=false;
function doPlay(){
  divObj.filters[0].Apply();
  if (clickBut){
    divObj.style.backgroundColor='pink';
    clickBut=false;
  } else {
    divObj.style.backgroundColor='blue';
    clickBut=true;
  }
  divObj.filters[0].Play();
  str='원래 : '+divObj.style.filter+'<BR>';
  str+='divObj.filters[0].orientation='+divObj.filters[0].orientation+'<BR>';
  str+='divObj.filters[0].motion='+divObj.filters[0].motion+'<BR>';
  str+='divObj.filters[0].duration='+divObj.filters[0].duration+'<BR>';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj"
  style="height:200;width:400;background-color:pink;
    filter:progid:DXImageTransform.Microsoft.Barn(duration=2,motion='out',orientation='vertical');">
</DIV>
<BUTTON onclick="divObj.filters[0].orientation='vertical';doPlay()" style=width:200>필터 효과(수직)</BUTTON>
<BUTTON onclick="divObj.filters[0].orientation='horizontal';doPlay()" style=width:200>필터 효과(수평)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].motion='in';doPlay()" style=width:200>필터 효과(안으로)</BUTTON>
<BUTTON onclick="divObj.filters[0].motion='out';doPlay()" style=width:200>필터 효과(밖으로)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].duration='1';doPlay()" style=width:100>필터 지속(1)</BUTTON>
<BUTTON onclick="divObj.filters[0].duration='2';doPlay()" style=width:100>필터 지속(2)</BUTTON>
<BUTTON onclick="divObj.filters[0].duration='4';doPlay()" style=width:100>필터 지속(4)</BUTTON>
<BUTTON onclick="divObj.filters[0].duration='8';doPlay()" style=width:100>필터 지속(8)</BUTTON>
</DIV>
<DIV id=show style="height:20;border:solid 1 blue;padding:3;margin-left:2em;margin-right:2em">필터 표시창</DIV>

Script	object.style.filter='progid:DXImageTransform.Microsoft.Barn(propVal)'
HTML	<ELEMENT style="filter:progid:DXImageTransform.Microsoft.barn(propVal)">

DIV에서 document.write(fileName)Barn 필터 속성 예제

DIV에서 Barn 필터 속성 예제