CheckerBoard Filter


Home > Document > Web design > CSS > Filter > Transition > CheckBoard

CheckerBoard Filter

CheckerBoard transition filter 는 지정하는 개수 만큼의 가로, 세로 check pattern 형태로 image를 전환시킵니다.

CheckerBoard filter
Property 설 명
Direction
CheckerBoard transition 이 진행되는 방향.
right Default. 왼쪽에서 오른쪽으로.
left 오른쪽에서 왼쪽으로.
up 아래에서 위로.
down 위에서 아래로.
SquaresX Default 12. Check pattern tile의 column 개수.
SquaresY Default 10. Check pattern tile의 row 개수.
Duration Transition이 지속되는 시간의 초 단위. 예) Duration='1.0000' 이면 1초 지속.
html syntax <ELEMENT STYLE =
"filter:progid:DXImageTransform.Microsoft.CheckerBoard(sProperties)">
scripting object.style.filter =
"progid:DXImageTransform.Microsoft.CheckerBoard(sProperties)"
적용 대상 All block level elements.
Note SquresX, SquresY 값이 2 보다 작거나 지정하지 않으면 기본값인 12, 10로 setting 된다.




CheckerBoard transition 예제


Source code
<html>
<head>
<title>CheckerBoard transition filter</title>
<script type="text/javascript">
<!--
var bState = 0;
function fnToggle(obj, obj1, obj2) {
obj.filters[0].Apply();
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.CheckerBoard(Duration=2);
}
-->
</style>
</head>
<body>

<button type="button" onclick="fnToggle(topContainer, img_1, img_2)">
Play CheckerBoard 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;">CheckerBoard Transition</span>

</div>

</body>
</html>


코드 실행 하기





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

Top
Back
New
검색