프리카운터넷

프로그래밍&개발

기존 공부방

아래 예제는 이미지를 바꿨을 때 적용되어 지는 예제 입니다.
그냥 이미지에 필터만 적용시켰을 경우 효과는 나타나지 않으며 그 필터가 적용된 이미지가 다른 이미지로
바뀌어질 경우에 그 효과가 적용이 됩니다. 이 효과는 이미지가 아닌 다른 것에도 사용이 가능합니다.

이 필터는 IE 5.5 이상부터 사용가능 합니다.

아래 설정을 바꾸어 가면서 실행 버튼을 눌러 보세요.

GradientSize:

wipeStyle:

motion:

duration:


	[소스] <script language="JavaScript"> <!-- //이미지 정의 (미리 불러오기 기능) var imgs1 = new Image() imgs1.src = 'share1.jpg' var imgs2 = new Image() imgs2.src = 'share2.jpg' var chk=0 function gogo(){ img1.filters[0].apply() //필터적용 if(chk==0){ img1.src = imgs2.src chk=1 } else if(chk==1){ img1.src = imgs1.src chk=0 } img1.filters[0].play() //필터실행 } //--> </script> <p align="center"> 아래 설정을 바꾸어 가면서 실행 버튼을 눌러 보세요.<br> <img src="share1.jpg" name="img1" style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward', duration=1)"></p> <table class="fon1" align="center" border="0" cellpadding="3" cellspacing="1" bgcolor="#666666"> <tr> <td bgcolor="#FFFFEE"><p align="center"> GradientSize:</p> </td> <td bgcolor="#FFFFEE"><p align="center"> <select size="1" onchange="img1.filters.item(0).GradientSize=this.value"> <OPTION VALUE="1.0">1.0</OPTION> <OPTION VALUE="0.9">0.9</OPTION> <OPTION VALUE="0.7">0.7</OPTION> <OPTION VALUE=".50">0.5</OPTION> <OPTION VALUE="0.3">0.3</OPTION> <OPTION VALUE="0.1">0.1</OPTION> <OPTION VALUE="0.0">0.0</OPTION> </select></p> </td> <td bgcolor="#FFF6F6"><p align="center"> wipeStyle:</p> </td> <td bgcolor="#FFF6F6"><p align="center"> <select size="1" onchange="img1.filters.item(0).wipeStyle=this.value"> <OPTION VALUE="0">오른쪽으로</OPTION> <OPTION VALUE="1">아래로</OPTION> </select></p> </td> <td bgcolor="#EDFFEC"><p align="center"> motion:</p> </td> <td bgcolor="#EDFFEC"><p align="center"> <select size="1" onchange="img1.filters.item(0).motion=this.value"> <OPTION VALUE="forward">바로</OPTION> <OPTION VALUE="reverse">거꾸로</OPTION> </select></p> </td> <td bgcolor="#F7FDFF"><p align="center"> duration:</p> </td> <td bgcolor="#F7FDFF"><p align="center"> <select size="1" onchange="img1.filters.item(0).duration=this.value"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select></p> </td> <td bgcolor="white"><p align="center"> <input type="button" value=" 실행 " onclick="gogo()"></p> </td> </tr> </table>