마우스(3)
-
마우스 커서 변경하기
이미지를 마우스 커서로 사용하기 CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있다. cursor: url('주소'), 속성값; 커서 속성 값url 중 마지막에 "auto" 속성 값은 비트맵 이미지 커서를 가져올 수 없는 경우 최종적으로 적용하는 커서 속성값이다. 커서 속성값은 쉼표로 구분해서 여러 개를 나열할 수 있으며, 왼쪽부터 순서대로 적용 가능한 커서 속성 값을 우선 적용한다. body { cursor: url('/resources/assets/images/icon/arrow_cusor_1.cur'), pointer;} 이모지를 마우스 커서로 사용하기 비트맵 이미지를 직접 만들어 사용하는 것 보다 이모지를 사용하면 조금 더 간편하게 마우스 커서를 변경할 수 있다. 사용..
2022.11.18
-
마우스 휠 중복 과다 제어 막기
ClearTimeout과 SetTimeout 으로 마우스 휠 중복 과다 제어 막기 var timeout; // 휠이벤트가 발생하면 window.onwheel = function(){ clearTimeout(timeout); //이전 휠 이벤트 제거 timeout = setTimeout(function(){ //다시 휠 이벤트 발생 0.1초후 // to do }, 1000); }; // section위에서 마우스 휠을 움직이면 $('section').on("mousewheel DOMMouseScroll", function(event,delta){ if (delta > 0 && cnt > 0 && wt>1024 && window.matchMedia("(min-width: 1024px)").matches) {..
2022.03.24
-
인터렉티브 웹 2 - 원페이지 슬라이드
HTML Full Blossom Be Colorful Time on Board Shiny Addict FULL BLOSSOM Lorem Ipsum is simply dummy text of the printing and typesetting industry BE COLORFUL Lorem Ipsum is simply dummy text of the printing and typesetting industry TIME ON BOARD Lorem Ipsum is simply dummy text of the printing and typesetting industry SHINY ADDICT Lorem Ipsum is simply dummy text of the printing and typesetting in..
2022.03.15