햄스터 키우기, 애니메이션 효과 예제

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

햄스터 이미지를 눌러보세요 ^^

초간단 예제입니다.

별거 아닌것 같지만 제이쿼리의 위대함(?)을 알 수 있습니다.

예제

햄스터를 눌러서 키워보세요 ㄷㄷ

소스

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<img src="http://biketago.com/img/etc/ham.gif" style="z-index:100; position:absolute; left:50%; margin-left:-30px;" id="ham" onclick="$(this).animate({width:'+=100', left:'-=50'}, 500, 'easeOutElastic')" />

<br><br><br><br><br>

햄스터를 눌러서 키워보세요 ㄷㄷ

<br><br><br><br><br><br>

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<img src="http://biketago.com/img/etc/ham.gif" style="z-index:100; position:absolute; left:50%; margin-left:-30px;" id="ham" onclick="$(this).animate({width:'+=100', left:'-=50'}, 500, 'easeOutElastic')" />

<br><br><br><br><br>

햄스터를 눌러서 키워보세요 ㄷㄷ

<br><br><br><br><br><br>

소스 설명

위 예제는 아래 주소에 강좌가 있습니다.

http://biketago.com/ev157

관련글 모음 (제이쿼리 애니메이션 예제 모음)

☞ 달팽이홈2

등록일 : 2014-12-06