jQuery 공작소 : 당겼다가 놓으면 제자리로 돌아가는 음식들
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
animate 메서드, jQuery UI의 이징(easing)효과와 draggable 을 사용한 간단한 예제입니다.
쉬운 예제로 그럴싸한 느낌이 나는 예제입니다. ^^;
예제 1
음식들의 귀소본능
보기
음식들을 드래그 했다가 놓아보세요~
소스
<style type="text/css">
.css_test {
}
.css_test img {
cursor : move;
}
</style>
음식들을 드래그 했다가 놓아보세요~<br><br>
<div class="css_test">
<img src="//superkts.com/img/icon/food/fff22.gif" />
<img src="//superkts.com/img/icon/food/fff27.gif" />
<img src="//superkts.com/img/icon/food/fff28.gif" />
<img src="//superkts.com/img/icon/food/fo028.gif" />
<img src="//superkts.com/img/icon/food/fo035.gif" /><br><br>
<img src="//superkts.com/img/icon/food/food_fd32.gif" />
<img src="//superkts.com/img/icon/food/food09[1].gif" />
<img src="//superkts.com/img/icon/food/food_fd213.gif" />
</div>
<script type="text/javascript">
// 보기편하게 여러줄로 코딩
$( '.css_test img' )
.draggable({
stop : function(){ // 드래그 종료시 실행
$(this).animate({ top : 0, left : 0 }, 1000, 'easeOutElastic' ); // 원위치로
// 제이쿼리UI 의 이징효과 사용
}
})
</script>
.css_test {
}
.css_test img {
cursor : move;
}
</style>
음식들을 드래그 했다가 놓아보세요~<br><br>
<div class="css_test">
<img src="//superkts.com/img/icon/food/fff22.gif" />
<img src="//superkts.com/img/icon/food/fff27.gif" />
<img src="//superkts.com/img/icon/food/fff28.gif" />
<img src="//superkts.com/img/icon/food/fo028.gif" />
<img src="//superkts.com/img/icon/food/fo035.gif" /><br><br>
<img src="//superkts.com/img/icon/food/food_fd32.gif" />
<img src="//superkts.com/img/icon/food/food09[1].gif" />
<img src="//superkts.com/img/icon/food/food_fd213.gif" />
</div>
<script type="text/javascript">
// 보기편하게 여러줄로 코딩
$( '.css_test img' )
.draggable({
stop : function(){ // 드래그 종료시 실행
$(this).animate({ top : 0, left : 0 }, 1000, 'easeOutElastic' ); // 원위치로
// 제이쿼리UI 의 이징효과 사용
}
})
</script>
관련 CSS
예제 2
참고
jQuery