개발자의 길

[javascript]이미지 특수 효과 : 리빌트랜스(RevealTrans) 필터 본문

2. JS

[javascript]이미지 특수 효과 : 리빌트랜스(RevealTrans) 필터

자르르 2012. 3. 19. 10:56



 RevealTrans 필터를 이용하여 이미지를 점진적으로 나타나게 했다가 점진적으로 사라지게 할 수 있는 효과를 살펴보도록 하겠다. 우선 간단한 예제부터 먼저 살펴보도록 하자.

아래 RevealTrans 필터 적용을 한 번 클릭하면 이미지가 점진적으로 사라질 것이다. 또 한 번 클릭하면 이미지가 점진적으로 나타날 것이다.

<html>
<head>
<SCRIPT language=javascript>
function goRevelTrans()
{
    objImg.filters[0].Apply();
    if (objImg.style.visibility == "visible") {
        objImg.style.visibility = "hidden";
 objImg.filters.revealTrans.transition=11;
    }
    else {
        objImg.style.visibility = "visible";
 objImg.filters[0].transition=11;
    }
    objImg.filters[0].Play();
}
</SCRIPT>
</HEAD>
<body>
<p align="center">
<INPUT onclick=goRevelTrans(); type=button value="RevealTrans 필터 적용"></p>
<p align="center"> <SPAN id=objImg
style="FILTER: revealTrans(duration=2); VISIBILITY: visible; WIDTH: 210px; HEIGHT: 262px"><IMG
src="http://img.sbs.co.kr/newimg/wizard2/program/tv/tazza/sub/images/777_cards01.jpg"> </SPAN></p>
</body>
</html>

위 스크립트에서 objImg는 <span> 태그를 통해 정의한 객체 ID이다. 즉 이미지를 포함하고 있는 SPAN 영역에 대한 아이디인 것이다. 이 ID를 통해 스타일과 필터 속성에 접근할 수가 있는 것이다. transtition 값을 조금씩 변경하면서 테스트 하면 자신이 원하는 리빌트랜스 효과를 얻을 수 있을 것이다.

저작자표시

'2. JS' 카테고리의 다른 글

[javascript] 기초 강좌 파일  (0) 2012.05.15
[jquery] 유용한 플러그인 모음  (0) 2012.04.06
[javascript] 한글,영어 자리수 계산  (0) 2012.03.08
[jquery] jquery CheatSheet  (0) 2012.01.12
[jquery] ajax 구분들  (0) 2012.01.09


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'2. JS' Related Articles more
Comments