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

Wave 필터 예제
필터 표시창
<SCRIPT>
changeColor=0;
function doPlay(){
  divObj.filters[0].Apply();
  if (changeColor){
    if (divObj.style.backgroundColor=='yellow'){
      divObj.style.backgroundColor='aqua';
      divObj.style.color='red';
    } else {
      divObj.style.backgroundColor="yellow";
      divObj.style.color='blue';
    }
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='Freq=('+divObj.filters.item(0).Freq+'), ';
  str+='Strength=('+divObj.filters.item(0).Strength+'), ';
  str+='LightStrength=('+divObj.filters.item(0).LightStrength+'), ';
  str+='Phase=('+divObj.filters[0].Phase+')';
  show.innerHTML=str;
}
</SCRIPT>
<STYLE>
.But{width:110}
</STYLE>
<DIV id="divObj"
 style="width:630;height:200;background-color:yellow;padding=5;font-size:40;line-height:1.2em;color:blue;font-weight:bold;
  filter:progid:DXImageTransform.Microsoft.Wave(LightStrength=30);">
<IMG src=../../../gif/rfexample.gif width=100><BR>
Wave 필터 예제
</DIV>
<BUTTON onclick="divObj.filters[0].Freq='0';doPlay()" class=But>Freq(0)</BUTTON>
<BUTTON onclick="divObj.filters[0].Freq='2';doPlay()" class=But>Freq(2)</BUTTON>
<BUTTON onclick="divObj.filters[0].Freq='4';doPlay()" class=But>Freq(4)</BUTTON>
<BUTTON onclick="divObj.filters[0].Freq='6';doPlay()" class=But>Freq(6)</BUTTON>
<BUTTON onclick="divObj.filters[0].Freq='8';doPlay()" class=But>Freq(8)</BUTTON>
<BUTTON onclick="divObj.filters[0].Freq='10';doPlay()" class=But>Freq(10)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].Strength='0';doPlay()" class=But>Strength(0)</BUTTON>
<BUTTON onclick="divObj.filters[0].Strength='1';doPlay()" class=But>Strength(1)</BUTTON>
<BUTTON onclick="divObj.filters[0].Strength='2';doPlay()" class=But>Strength(2)</BUTTON>
<BUTTON onclick="divObj.filters[0].Strength='4';doPlay()" class=But>Strength(4)</BUTTON>
<BUTTON onclick="divObj.filters[0].Strength='8';doPlay()" class=But>Strength(8)</BUTTON>
<BUTTON onclick="divObj.filters[0].Strength='16';doPlay()" class=But>Strength(16)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].LightStrength='0';doPlay()" class=But>LightStrength(0)</BUTTON>
<BUTTON onclick="divObj.filters[0].LightStrength='10';doPlay()" class=But>LightStrength(10)</BUTTON>
<BUTTON onclick="divObj.filters[0].LightStrength='20';doPlay()" class=But>LightStrength(20)</BUTTON>
<BUTTON onclick="divObj.filters[0].LightStrength='30';doPlay()" class=But>LightStrength(30)</BUTTON>
<BUTTON onclick="divObj.filters[0].LightStrength='40';doPlay()" class=But>LightStrength(40)</BUTTON>
<BUTTON onclick="divObj.filters[0].LightStrength='50';doPlay()" class=But>LightStrength(50)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].Phase='0';doPlay()" class=But>Phase(0)</BUTTON>
<BUTTON onclick="divObj.filters[0].Phase='10';doPlay()" class=But>Phase(10)</BUTTON>
<BUTTON onclick="divObj.filters[0].Phase='30';doPlay()" class=But>Phase(30)</BUTTON>
<BUTTON onclick="divObj.filters[0].Phase='50';doPlay()" class=But>Phase(50)</BUTTON>
<BUTTON onclick="divObj.filters[0].Phase='75';doPlay()" class=But>Phase(75)</BUTTON>
<BUTTON onclick="divObj.filters[0].Phase='100';doPlay()" class=But>Phase(100)</BUTTON><BR>
<BUTTON onclick="divObj.filters[0].Enabled=true">필터 작용</BUTTON>
<BUTTON onclick="divObj.filters[0].Enabled=false">필터 중지</BUTTON>
<BUTTON onclick="changeColor=1;doPlay()">색상 변경</BUTTON>
<DIV id=show style="width:660;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>