jQuery 공작소 : 음식 무한 복제

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        position : relative;
    }
</style>

음식을 누르면 복제가 됩니다. 복제된 음식도 누르면 다시 복제됩니다.<br>
복제된 음식은 3초후 사라집니다. (움직임이 끝난 후)<br><br>

<div class="css_test">
    <img class="cp" style="z-index:999;" src="//superkts.com/img/icon/food/food09[1].gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">

    function j_test(o){

        var pos = $(o).offset(); // 클릭한 이미지의 위치알아내기
        // 이동할 위치값을 랜덤으로 생성 -150 부터 150 사이
        var rnd1 = Math.round( Math.random() * 300 - 150 );
        var rnd2 = Math.round( Math.random() * 300 - 150 );

        // 클릭한 이미지 기준으로 이동할 위치계산
        var move_top = pos.top - rnd1;
        var move_left = pos.left - rnd2;

        // 보기편하게 여러줄 코딩
        $(o)
        .clone() // 클릭한 이미지 복제
        .appendTo( '.css_test' ) // css_test 에 복제한것 추가
        .css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경
        .animate( { top : move_top, left : move_left }, 1000, 'easeOutElastic', function(){
            var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기
            setTimeout( function(){ $(img).remove(); }, 3000); // 3초후 제거
        });
    }

</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        position : relative;
    }
</style>

click 메서드를 사용한 자동 클릭. 버튼을 눌러보세요.<br><br>

<div class="css_test">
    <img class="cp" style="z-index:999;" src="//superkts.com/img/icon/food/food_fd32.gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">

    function j_test(o){

        var pos = $(o).offset(); // 클릭한 이미지의 위치알아내기
        var rnd1 = Math.round( Math.random() * 900 - 450 );
        var rnd2 = Math.round( Math.random() * 900 - 450 );

        // 클릭한 이미지 기준으로 이동할 위치계산
        var move_top = pos.top - rnd1;
        var move_left = pos.left - rnd2;

        // 보기편하게 여러줄 코딩
        $(o)
        .clone() // 클릭한 이미지 복제
        .appendTo( '.css_test' ) // css_test 에 복제한것 추가
        .css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경
        .animate( { top : move_top, left : move_left }, 1000, function(){
            var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기
            setTimeout( function(){ $(img).remove(); }, 2000); // 2초후 제거
        });
    }

    var j_test_timer = 100;
    var j_test_inter;

    function j_test_click(){
        $('.css_test img:eq(0)').click();
    }

    // 자동 클릭 (광클)
    function j_test_start(){
        j_test_inter = setInterval(j_test_click, j_test_timer);
    }

    function j_test_stop(){
        clearInterval(j_test_inter);
    }

    function j_test_speed(n){
        j_test_timer = n;
        j_test_stop();
        j_test_start();
    }

</script>

<div class="ac" style="z-index:1000; position:relative;">
    <button type="button" onclick="j_test_speed(500)">느리게</button>
    <button type="button" onclick="j_test_speed(250)">보통</button>
    <button type="button" onclick="j_test_speed(100)">빠르게</button>
    <button type="button" onclick="j_test_speed(10)">매우 빠르게</button>
    <button type="button" onclick="j_test_speed(1)">완전 빠르게</button><br>
    <button type="button" onclick="j_test_stop()">멈추기</button>
</div>