HTML5를 사용하여 마우스 휠을 사용하여 사진 확대 및 축소 기능 구현 events_html5 튜토리얼 기술

여러분과 저는 HTML5 웹 페이지에 마우스 휠 이벤트를 추가하면 사용자가 웹 페이지와 더 효과적으로 상호 작용할 수 있다는 것을 알고 있습니다. HTML5에서는 마우스 휠을 사용하여 웹 페이지를 위아래로 이동할 수 있을 뿐만 아니라 보기 평면 확대 및 축소와 같은 더 많은 기능을 완료할 수도 있습니다.

실제 시연 효과 보기
대부분의 브라우저는 마우스 휠 이벤트를 지원하므로 이벤트가 발생할 때마다 먼저 마우스 휠 이벤트 메소드를 구독할 수 있으며, 휠델타라는 속성을 얻을 수 있습니다. 는 방금 변경된 마우스 휠의 크기를 나타내며, 양수 값은 휠이 아래로 미끄러지는 것을 의미하고, 음수 값은 휠이 위로 미끄러지는 것을 의미합니다. 값의 절대값이 클수록 슬라이딩 범위가 커집니다.

그런데 아쉽게도 여전히 마우스 휠 이벤트를 지원하지 않는 브라우저가 있습니다. 바로 파이어폭스입니다. Mozilla는 "DOMMouseScroll"이라는 이벤트 처리를 구현했습니다. 이는 event라는 이벤트 매개변수를 세부 속성과 함께 전달합니다. 그러나 이 세부 속성은 WheelDelta와 다르며, 양수 값만 반환할 수 있습니다. 마우스 휠이 아래로 스크롤되는 모습입니다.

Apple은 Safari 브라우저에서 페이지 슬라이딩을 위아래로 제어하기 위해 마우스 스크롤도 비활성화했다는 사실에 특별한 주의를 기울여야 합니다. 하지만 이 기능은 여전히 ​​웹킷 엔진에서 정상적으로 사용되므로 작성하는 코드가 실행되지 않습니다. 어떤 문제.

마우스 휠 이벤트 처리 방법 추가
먼저 웹 페이지에 이미지를 추가하고 나중에 마우스 휠을 사용하여 이미지 확대/축소를 제어할 수 있습니다

이제 마우스 휠 이벤트 처리 코드를 추가하세요

다양한 브라우저를 지원하기 위해

다음 경우에는 Firefox 세부 정보 값을 반전하고 1 또는 -1 중 하나를 반환합니다.

실제 시연 보기