jQuery 공작소 : .offset()

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

offset 메소드는 요소의 위치정보를 가져옵니다.

예제 1
offset 메서드로 박스의 위치 top, left 값 보기
보기
버튼을 누르면 각 테두리의 왼쪽위 좌표를 알아냅니다. (left, top 값)

jQuery 공작소
jQuery 공작소
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        margin : 0 auto;
        padding : 15px;
        width : 500px;
    }
    .css_test.small {
        margin-top : 10px;
        width : 400px;
    }
</style>

버튼을 누르면 각 테두리의 왼쪽위 좌표를 알아냅니다. (left, top 값)<br><br>
<div class="css_test">
    jQuery 공작소<br>
    <button type="button" onclick="j_test(this)">눌러보세용 !</button>
</div>

<div class="css_test small">
    jQuery 공작소<br>
    <button type="button" onclick="j_test(this)">눌러보세용 !</button>
</div>


<script type="text/javascript">
    function j_test(el){
        var o = $(el).parent().offset(); // 클릭한 버튼의 부모인 DIV 를 대상으로 offset !
        alert( 'left : ' + o.left + ', top : ' + o.top );
    }
</script>
관련 CSS
jQuery

- $( 셀렉터 ).offset()  -  해당 셀렉터 요소의 top, left 위치값을 알아냅니다.
- 값은 객체 형태로 반환됩니다.

- $( 셀렉터 ).offset().left  -  left 값
- $( 셀렉터 ).offset().top  -  top 값

처럼 사용해도 되고, 위 예제에 있는 스크립트에서 사용한 방법으로 사용해도 됩니다.

예제 2
활용 예제 - 유체이탈 하시는 분들 (!)
보기
얼굴을 클릭해 보세요.

소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 100px;
    }
    .css_test .new_img { /* 새로 추가되는 이미지 */
        position : absolute;
    }
</style>

얼굴을 클릭해 보세요.<br><br>
<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(el){
        var o = $(el).offset(); // 클릭한 이미지를 대상으로 offset !
        var img = $('.css_test').append('<img class="new_img" src="//superkts.com/img/css/huk.gif">'); // 이미지 하나 추가

        // 추가된 이미지의 위치를 클릭한 이미지와 같은 위치로 설정하고 애니메이션
        // 그렇게 하면 클릭한 이미지에서 새로운 이미지가 위로 올라가게 됨.
        $( '.css_test img:last' ).css( { top : o.top, left : o.left } ).animate( { top : '-=200', opacity : 0 }, 1000, function(){
            $(this).remove();
        });
    }
</script>
관련 CSS
jQuery

뭐 이런걸 만들때도 쓸 수 있다는 것이죠.. ^^;

유체이탈은 ...
.animate( { top : '-=200', opacity : 0 }  -  현재위치에서 위로 -200px 만큼 이동과 동시에 투명하게 만듬

참고 메서드 : .animate()

+ 관련 jQuery +
jQuery 홈페이지 .offset() API 문서 : https://api.jquery.com/offset/