BLOG main image
Notice
CATEGORY
전체 (276)
[Computer] (42)
[Programming] (62)
[DBMS] (26)
[Operating System] (21)
[Study English] (8)
[For money] (28)
[Interest] (89)
TAGS
Recent Entries
Recent Comments
Recent Trackbacks
Calendar
«   2008/07   »
일 월 화 수 목 금 토
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
Archive
Link Site
78007 Visitors up to today!
Today 21 hit, Yesterday 83 hit
'2008/07'에 해당되는 글 1건
자바스크립트로 이미지 부드럽게 변경하기 | 2008/07/02

- 페이지 넘기기는 맨 아래에 있습니다. 클릭!! -

자바스크립트로 이미지 부드럽게 변경하기
[폭주기관차, 2008/07/02 14:35, [Programming]/JavaScript]
홈페이지를 보면 두개의 이미지가 부드럽게 바뀌는 것을 자주 볼 게 된다.

엄청 어려운 기술로만 생각을 했는데 자바스크립트에서 단 몇 줄만 넣으면
부드럽게 바뀌는 이미지가 만들어진다는 것에 난 당혹감을 감추지 못하였다.....;; 헐;;

소스코드는 아래와 같다.

<html>
<head>
<script>
function startTrans(){
    faceoff.filters.blendTrans.Apply();
    faceoff.src="face_2.gif"
    faceoff.filters.blendTrans.play();
}
</script>
</head>

<body onLoad=startTrans()>
잠시 기다리시면...<br>
효과를 보실수 있습니다. 잠시만 기다려 주세요.<br>
<img src="face_1.gif" id=faceoff style="filter:blendTrans(duration=10)">
</body>
</html>


첨부된 아래의 예제 파일을 받고 실행 해보라... 놀랍다.

script183.zip

스무스 이미지 변경 예제



간단하게 소수 분석을 하자면 IMG 태그에서 style옵션에 duration=10은 10초동안
두개의 이미지가 변경되는 것을 의미하는 것이다.

    faceoff.filters.blendTrans.Apply();

    
은 현재 faceoff라는 IMG에 있는 이미지를 고정시키고 있다가

    faceoff.src="face_2.gif"

    
이미지를 face_2.gif로 변경하고

    faceoff.filters.blendTrans.play();

    
이제 Apply함수 수행했을때 이미지랑 최근에 바뀐 이미지로 변환하는 것을
시작하라(play)는 명령이다.    

이런 좋은 소스를 무료로 제공해주신 분께 최소한의 예의로 아래에 출처와
소스코드의 변수명을 변경하지 않고 그대로 올렸습니다~

출처 : http://cbkim.wkhc.ac.kr/
        며루치님의 블로그글

, , , ,
Trackback0 : Comment0
Trackback Address :: http://kongmks.cafe24.com/trackback/295
Name
Password
Homepage
Secret

- 맨위로... -

*1