Wulin.com의 기사 소개 (www.vevb.com) : HTML5는 마우스 휠 이벤트를 어떻게 사용합니까?
HTML5 웹 페이지에 마우스 휠 이벤트를 추가하면 사용자가 웹 페이지와 상호 작용할 수 있습니다. HTML5에서 마우스 스크롤 휠은 웹 페이지를 위아래로 미끄러 뜨릴 수있을뿐만 아니라. 실제로, 당신은 또한 이에 의존하여 뷰 플레인의 확대 및 감소와 같은 더 많은 기능을 완료 할 수 있습니다.
대부분의 브라우저는 마우스 휠 이벤트를 지원하므로 먼저 마우스 휠 이벤트 방법을 구독 할 수 있습니다. 이벤트가 트리거 될 때마다 휠 델타 (Wheeldelta)라는 속성을 얻을 수 있습니다. 양수 값은 스크롤 휠이 아래로 미끄러 져 나오고 음수 값이 스크롤 휠이 미끄러 져 미끄러 져 있음을 나타냅니다. 값의 절대 값이 클수록 슬라이딩 범위가 커집니다.
불행히도, 마우스 휠 이벤트를 지원하지 않는 브라우저가 여전히 있습니다. 그것은 Firefox입니다. Mozilla는 Dommousescroll이라는 이벤트의 처리를 구현했으며,이 행사는 세부 사항이라는 속성이있는 이벤트라는 이벤트 매개 변수를 전달합니다. 그러나이 세부 속성은 휠 델타와 다르며, 이는 양수 값 만 반환 할 수 있습니다. 즉, 마우스 휠의 값만 아래쪽으로 스크롤하는 것만 주장 할 수 있습니다.
Apple은 Safari 브라우저에서 페이지를 위아래로 미끄러 뜨리기 위해 마우스 스크롤을 비활성화했지만이 기능은 여전히 WebKit 엔진에서 정상적으로 사용되므로 작성된 코드는 문제를 유발하지 않습니다.
마우스 휠 이벤트 처리 방법을 추가하십시오
먼저 웹 페이지에 이미지를 추가하고 마우스 휠을 사용하여 나중에이 이미지의 줌을 제어 할 수 있습니다.
<img id = myimage src = myimage.jpg alt = my image />
이제 마우스 휠 이벤트 처리 코드를 추가하십시오
var myimage = document.getElementById (myimage);
if (myimage.addeventListener) {
// IE9, Chrome, Safari, Opera
Myimage.addeventListener (Mousewheel, Mousewheelhandler, False);
// Firefox
Myimage.addeventListener (Dommousescroll, Mousewheelhandler, False);
}
// 6/7/8
else myimage.attachevent (onmousewheel, mousewheelhandler);
다른 브라우저에서 지원할 수있는 처리 관행
다음의 경우 Firefox의 세부 값을 역전시키고 1 또는 -1 중 하나를 반환합니다.
함수 mousewheelhandler (e) {
// 크로스 브라우저 휠 델타
var e = Window.event || 이자형; // Old IE 지원
var delta = math.max (-1, math.min (1, (e.wheeldelta || -e.detail)));
이제 우리는 그림의 크기 범위를 직접 결정합니다. 다음 코드는 50-800 픽셀 사이의 그림 너비 범위를 설정합니다.
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * delta)) + px;
거짓을 반환합니다.
}
마지막 포인트, 우리는 웹 페이지 위아래로 미끄러지면 표준 마우스 휠 이벤트 처리를 종료하기 위해 메소드에서 False를 반환합니다.