Spiral 필터 예제

필터 지속(0) 필터 지속(1) 필터 지속(2) 필터 지속(4) 필터 지속(8) 필터 지속(16)
GridSizeX(4) GridSizeX(8) GridSizeX(16) GridSizeX(32) GridSizeX(64) GridSizeX(100)
GridSizeY(4) GridSizeY(8) GridSizeY(16) GridSizeY(32) GridSizeY(64) GridSizeY(100)

필터 표시창

<SCRIPT>
var clickBut=false;
function doPlay(){
  divObj.filters[0].Apply();
  if (clickBut){
    clickBut=false;
    divObj.style.backgroundColor='pink';
  } else {
    clickBut=true;
    divObj.style.backgroundColor="green";
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='Duration=('+divObj.filters.item(0).Duration+'), ';
  str+='GridSizeX=('+divObj.filters.item(0).GridSizeX+'), GridSizeY=('+divObj.filters.item(0).GridSizeY+')<BR> ';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj"
 style="width:600;height:200;background-color:pink;padding=5;font-size:40;line-height:1.2em;color:yellow;font-weight:bold;
  filter:progid:DXImageTransform.Microsoft.Spiral(duration=3);">
<IMG src=../../../gif/rfexample.gif width=100><BR>
Spiral 필터 예제
</DIV>
<BUTTON onclick="divObj.filters[0].Duration='0';doPlay()" style="width:100">필터 지속(0)</BUTTON>
<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>
<BUTTON onclick="divObj.filters[0].Duration='16';doPlay()" style="width:100">필터 지속(16)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].GridSizeX='4';doPlay()" style="width:100">GridSizeX(4)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeX='8';doPlay()" style="width:100">GridSizeX(8)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeX='16';doPlay()" style="width:100">GridSizeX(16)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeX='32';doPlay()" style="width:100">GridSizeX(32)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeX='64';doPlay()" style="width:100">GridSizeX(64)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeX='100';doPlay()" style="width:100">GridSizeX(100)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].GridSizeY='4';doPlay()" style="width:100">GridSizeY(4)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeY='8';doPlay()" style="width:100">GridSizeY(8)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeY='16';doPlay()" style="width:100">GridSizeY(16)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeY='32';doPlay()" style="width:100">GridSizeY(32)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeY='64';doPlay()" style="width:100">GridSizeY(64)</BUTTON>
<BUTTON onclick="divObj.filters[0].GridSizeY='100';doPlay()" style="width:100">GridSizeY(100)</BUTTON>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>