[JQuery] Javascript, jQuery를 사용하여 이미지 소스 변경

jQuery를 사용하여 이미지 소스 변경

스크롤 내릴때 마다 변경

$(document).ready(function() {

    var imageEl = document.getElementById('fake-image');

    function getSrc(scrollPos) {
        console.log("offsetTop" + imageEl.offsetTop);
        var children = imageEl.childNodes;

        if (scrollPos < imageEl.offsetTop + 700 ) {
            $("#cos_image").attr("src","images/03_girl2.png");
            console.log("step1");            
        }
        else if (scrollPos < imageEl.offsetTop + 700 * 2) {
            $("#cos_image").attr("src","images/02_girl2.png");
            console.log("step2");
        }
        else {
            $("#cos_image").attr("src","images/01_girl2.png");
            console.log("step3");
        }
    }

    window.addEventListener('scroll', function() {
        getSrc(window.scrollY)
    });
}

소스설명

1. window.scrollY값 getSrc함수에 넘김.

2. 해당 값은 scrollPos값으로, 이 값이 이미지 엘리먼트 오프셋 위 (offsetTop)에 따라서,

이미지의 attr를 바꾼다.

 

 

 

 

 

참고자료/출처

http://daplus.net/javascript-jquery%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%86%8C%EC%8A%A4-%EB%B3%80%EA%B2%BD/