Iris Filter


Iris Filter

Iris transition filter 는 선택한 image를 지정하는 irisStyle(Circle, Cross, Diamond, Plus, Square, Star) 을 지정하는 Motion(In, Out)으로 전환시킵니다.

Iris filter
Property 설 명
IrisStyle
Iris transition 이 진행되는 모양.
Circle ○ 모양.
Cross × 모양.
Diamong ◇ 모양.
Plus ┼ 모양. Default.
Square □ 모양.
Star ☆ 모양.
Motion
In 안에서 바깥으로.
Out 바깥에서 안으로. Default.
Duration Transition이 지속되는 시간의 초 단위. 예) Duration='1.0000' 이면 1초 지속.
html syntax <ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.Iris(sProperties)">
scripting object.style. filter =
"progid:DXImageTransform.Microsoft.Iris(sProperties)"
적용 대상 All block level elements.
Note  




Iris transition 예제


Source code
<html>
<head>
<title>Iris transition filter</title>
<script type="text/javascript">
<!--
var bState = 0;

function fnToggle(obj, obj1, obj2) {
obj.filters[0].Apply();
iStyle = document.irisFilter.irisType.options[document.irisFilter.irisType.selectedIndex].value;
iMotion = document.irisFilter.irisMotion.options[document.irisFilter.irisMotion.selectedIndex].value;
obj.filters.item("DXImageTransform.Microsoft.Iris").irisStyle = iStyle;
obj.filters.item("DXImageTransform.Microsoft.Iris").motion = iMotion;

if (bState == 0) {
bState = 1;
obj.style.backgroundColor="royalblue";
obj.style.color = "#FFFFFF";
obj2.style.visibility="visible";
obj1.style.visibility="hidden";
}

else {
bState = 0;
obj.style.backgroundColor="#ffffcc"
obj.style.color = "#000000"
obj2.style.visibility="hidden";
obj1.style.visibility="visible";
}

obj.filters[0].Play();
}
// -->
</script>
<style type="text/css">
<!--
.container{
width:200px;
height:200px;
position:relative;
top:50px;
left:50px;
background-color:#ffffcc;
border:1px solid tomato;
font:bold 18px verdana;
padding:10px;
filter: progid:DXImageTransform.Microsoft.Iris();
}
-->
</style>
</head>
<body>

<form id="irisFilter" name="irisFilter">
irisType :
<select id="irisType" name="irisType">
<option value="Circle" selected="selected">Circle</option>
<option value="Cross">Cross</option>
<option value="Diamond">Diamond</option>
<option value="Plus">Plus</option>
<option value="Square">Square</option>
<option value="Star">Star</option>
</select>
IrisMotion :
<select id="irisMotion" name="irisMotion">
<option value="In" selected="selected">In</option>
<option value="Out">Out</option>
</select>
</form>

<button onclick="fnToggle(topContainer, img_1, img_2)">Play Iris Filter</button>

<div class="container" id="topContainer">
<img id="img_1" style="position:absolute" src="images/twins.gif" width="136" height="136"
alt="mc2_dice (6K)" />
<img id="img_2" style="visibility:hidden;position:absolute" src="images/mc2_dice.gif"
width="136" height="136" alt="twins (7K)" />
<span style="position:absolute;bottom:10px;">Iris Transition</span>
</div>

</body>
</html>


코드 실행 하기

예제 source code 중에 onChange event 에 관한 자세한 내용은 여기를 참조 하시기 바랍니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색