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

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

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

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. <img id="myimage" src="myimage.jpg" alt="내 이미지" />

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. var myimage = document.getElementById("myimage")
2. if (myimage.addEventListener) {
3. // IE9, 크롬, 사파리, 오페라
4. myimage.addEventListener("mousewheel", MouseWheelHandler, false)
5. // 파이어폭스
6. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false)
7. }
8. // IE 6/7/8
9. else myimage.attachEvent("onmousewheel", MouseWheelHandler)

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. function MouseWheelHandler(e) {
2. // 크로스 브라우저 휠 델타
3. var e = window.event || e; >
var
4. delta = Math.max(-1, Math.min(1, (e.wheelDelta) || -e.detail)))

이제 이미지의 크기 범위를 직접 결정합니다. 다음 코드는 이미지의 너비 범위를 50~800픽셀 사이로 설정합니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1.  myimage.style.width = 수학.max(50, Math.min(800) , myimage.width (30 * 델타))) "px"
false 반환
}

마지막으로 웹페이지가 상하로 슬라이딩되는 것을 방지하기 위해 표준 마우스 휠 이벤트 처리를 종료하는 메서드에서 false를 반환합니다.

실제 시연 보기