RadialWipe 필터 예제

정상 이미지 필터 효과 형식 변환 배경 색상 초기화 지속성 증가 지속성 감소

필터 표시창

<SCRIPT>
var WipeStyles=new Array();
WipeStyles=['clock','wedge','radial'];
var  colors=new Array('pink','green','red','yellow','blue','aqua','brown','teal');
var idx=cidx=0;
function doPlay(job){
  if (job==4) ++idx;
  divObj.filters[0].wipeStyle=WipeStyles[idx%3];
  if (job==5) ++cidx;
  hcidx=cidx%(colors.length);
  bgA=divObj.style.backgroundColor=colors[hcidx];
  if (!job) divObj.filters[0].Enabled=false;
  else {
    divObj.filters[0].Apply();
    divObj.filters[0].Enabled=true;
    if (job==1) {}
    if (job==2) ++divObj.filters[0].Duration;
    if (job==3){
      if (divObj.filters[0].Duration) --divObj.filters[0].Duration;
    }
    if (job==6){
      divObj.filters[0].Duration=2;
    }
    hcidx=(cidx+1)%(colors.length);
    bgB=divObj.style.backgroundColor=colors[hcidx];
    divObj.filters[0].Play();
  }
  str='';
  str+='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='backgroundColor=('+bgA+'⇒'+bgB+')<BR>';
  str+='WipeStyle=('+divObj.filters.item(0).WipeStyle+'), ';
  str+='Duration=('+divObj.filters.item(0).Duration+')<BR>';
  show.innerHTML=str;
}
</SCRIPT>

<STYLE>
.butClass{width:90}
.divClass {font-size:50;line-height:1.2em;font-weight:bold;padding:9}
</STYLE>
<DIV id="divObj" CLASS="divClass"  style="width:630;height:300;background:pink;color:yellow;
  filter:progid:DXImageTransform.Microsoft.RadialWipe(Duration=2);">
<IMG src=../../../gif/rfexample.gif width=100><BR>
RadialWipe 필터 예제
</DIV>
<BUTTON onClick="doPlay(0)" class="butClass">정상 이미지</BUTTON>
<BUTTON onclick="doPlay(1)" class="butClass">필터 효과</BUTTON>
<BUTTON onclick="doPlay(4)" class="butClass">형식 변환</BUTTON>
<BUTTON onclick="doPlay(5)" class="butClass">배경 색상</BUTTON>
<BUTTON onclick="doPlay(6)" class="butClass">초기화</BUTTON>
<BUTTON onclick="doPlay(2)" class="butClass">지속성 증가</BUTTON>
<BUTTON onclick="doPlay(3)" class="butClass">지속성 감소</BUTTON>
<DIV id=show style="width:630;height:65;border:solid 1 blue;padding:3;font-size:90%">필터 표시창</DIV>