간단하게 마우스커서 이미지 변경 (다양한 조건에 따라 커서 커스텀 하기)

 

화면 중앙을 기준으로 마우스커서 이미지를 다르게 변경해야한다. 

커서가 좌측에 있을 땐 <-, 우측에 있을 땐 -> 이런모양으로..

 

물론 브라우저 크기를 줄이면 기준점이 되는 위치도 새롭게 계산되어야한다.

 

 

css / scss

.cursor_L {cursor: url(/files/attach/images/main/arr.png), auto}
.cursor_R {cursor: url(/files/attach/images/main/arr-left.png), auto}

 

javascript

$(document).ready(function(){

    $(document).mousemove(function(e){

        var htmlWidth = $('html').width();
        var num = Number(htmlWidth);
        var res = parseInt(num / 2);

        if(e.pageX < res){
            $('html').addClass('cursor_R');
            $('html').removeClass('cursor_L');
        }else {
            $('html').addClass('cursor_L');
            $('html').removeClass('cursor_R');
        }
    });
});

 

마우스가 움직일 때 마다 실행되는 함수이다.

즉, 마우스가 움직일 때 마다 html의 넓이를 계산한다.

 

창을 줄여도 다시 window 안에 마우스커서가 위치하는 순간 함수가 실행되어 줄어든 html 넓이를 계산해준다!

 

이런 방식을 응용해서 다양한 조건에서 마우스 커서를 자유롭게 바꿀 수 있을듯..!

 

 

처음에 이걸 만들어달래서 ...? 했는데 

아주 기본적인 자바스크립트만으로도 만들 수 있는 가성비 내려오는 효과였다ㅋㅋ