Stretch 필터 예제

HIDE PUSH SPIN
필터 지속(0) 필터 지속(1) 필터 지속(2) 필터 지속(4) 필터 지속(8) 필터 지속(16)

필터 표시창

<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+='StretchStyle=('+divObj.filters.item(0).StretchStyle+')';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj"
 style="width:600;height:100;background-color:pink;padding=5;font-size:40;line-height:1.2em;color:yellow;font-weight:bold;
  filter:progid:DXImageTransform.Microsoft.Stretch(duration=3);">
<IMG src=../../../gif/rfexample.gif width=100><BR>
Stretch 필터 예제
</DIV>
<BUTTON onclick="divObj.filters[0].StretchStyle='HIDE';doPlay()" style="width:200">HIDE</BUTTON>
<BUTTON onclick="divObj.filters[0].StretchStyle='PUSH';doPlay()" style="width:200">PUSH</BUTTON>
<BUTTON onclick="divObj.filters[0].StretchStyle='SPIN';doPlay()" style="width:200">SPIN</BUTTON><BR>
<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>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>