유체이탈 하시는 분들

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

요즘 정치권의 대세인 유체이탈 !!
해봅시다 ~!

+_+
예제 1
유체이탈 대기중인 녀석들
보기





얼굴을 클릭해 보세요.




소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 120px;
    }
    .css_test .new_img { /* 새로 추가되는 이미지 */
        position : absolute;
    }
</style>
<br><br><br><br><br>
얼굴을 클릭해 보세요.<br><br>
<div class="css_test">
    <img src="http://superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/huk.gif" onclick="j_test(this)" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var o = $(el).offset(); // 클릭한 이미지를 대상으로 offset !
        var img = $('.css_test').append('<img class="new_img" src="http://superkts.com/img/css/huk.gif">'); // 이미지 하나 추가

        // 이미지를 클릭하면 새로운 이미지를 하나 추가합니다. - append 메소드 사용
        // 새로 추가된 이미지를 클릭한 이미지와 동일한 위치로 설정 후 애니메이션 합니다.
        // 그럼 해당 위치에서 새로추가된 이미지가 위로 올라가게 되죠.
        $( '.css_test img:last' ).css( { top : o.top, left : o.left } ).animate( { top : '-=300', opacity : 0 }, 1000, function(){
            $(this).remove();
        });
    }
</script>
관련 CSS
jQuery
- 누가 더 예쁘게 하나 보기~
- 간단한 메소드 몇개로 만들어진 예제입니다.
예제 2
좀 더 격하게 !
보기





얼굴을 클릭해 보세요. 좌우 번갈아 가며 빠르게 !!




소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 200px;
    }
    .css_test .new_img { /* 새로 추가되는 이미지 */
        position : absolute;
    }
</style>
<br><br><br><br><br>
얼굴을 클릭해 보세요. 좌우 번갈아 가며 빠르게 !!<br><br>
<div class="css_test">
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var o = $(el).offset(); // 클릭한 이미지를 대상으로 offset !
        var img = $('.css_test').append('<img class="new_img" src="http://biketago.com/img/etc/huk2.gif">'); // 이미지 하나 추가

        // 이미지를 클릭하면 표정이 바뀐 이미지를 새로 추가합니다. - append 메소드 사용
        // 새로 추가된 이미지를 클릭한 이미지와 동일한 위치로 설정 후 애니메이션 합니다.
        // 그럼 해당 위치에서 새로추가된 이미지가 위로 올라가게 되죠.
        $( '.css_test img:last' ).css( { top : o.top, left : o.left } ).animate( { top : '-=500', opacity : 0 }, 1000, function(){
            $(this).remove();
        });
    }
</script>
관련 CSS
jQuery
- 새삼스럽게 놀라는 척 ~
- 제이쿼리가 있어 쉽게 만들어보는 것들.
예제 3
좀 더 신나게 !!
보기





얼굴 연타 !!!



BGM : 둠칫 둠칫 ♬ ~


소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 100px;
    }
</style>
<br><br><br><br><br>
얼굴 연타 !!!<br><br>
<div class="css_test">
    <img src="http://superkts.com/img/css/huk.gif" onclick="j_test(this)" />
</div>
<br><br>
BGM : 둠칫 둠칫 ♬ ~
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var pos = $(el).offset(); // 클릭한 이미지를 대상으로 offset !

        // clone 메서드로 이미지 복제후 부모요소 내에 추가하고 애니메이션 종료후 삭제
        $(el).clone().appendTo($(el).parent()).css({
            position:'absolute',
            left:pos.left,
            top:pos.top
        }).animate({
            left:'-=2500',
            top:'-=2500',
            width:'+=5000',
            height:'+=5000'
        }, 2000, 'easeInQuint', function(){
            $(this).remove();
        });

    }
</script>
관련 CSS
jQuery
- 음 ...