wulin.comの記事紹介（www.vevb.com）：HTML5はマウスホイールイベントをどのように使用しますか？
HTML5 Webページにマウスホイールイベントを追加すると、ユーザーがWebページと対話できるようになります。 HTML5では、マウススクロールホイールは、Webページを上下にスライドさせるだけではありません。実際、これに依存して、ビューフィールドの拡大や縮小など、より多くの機能を完了することもできます。
ほとんどのブラウザはマウスホイールイベントをサポートするため、最初にマウスホイールイベントメソッドを購読できます。イベントがトリガーされるたびに、Mouse Wheelのサイズを表すWheeldeltaというプロパティを取得できます。正の値は、スクロールホイールが滑り落ちることを示し、負の値はスクロールホイールがスライドすることを示します。値の絶対値が大きいほど、スライド範囲が大きくなります。
残念ながら、マウスホイールイベントをサポートしていないブラウザはまだあります。それはFirefoxです。 Mozillaは、DommouseScrollと呼ばれるイベントの処理を実装しました。これは、詳細と呼ばれるプロパティを使用してイベントというイベントというイベントパラメーターを渡します。ただし、この詳細プロパティは、ホイールデルタとは異なり、正の値のみを返すことができます。つまり、マウスホイールの値が下にスクロールすることのみを主張することしかできません。
Appleはマウススクロールを無効にしてSafariブラウザーで上下にスライドするページを制御することに特に注意する必要がありますが、この機能はまだWebKitエンジンで通常使用されているため、記述したコードは問題を引き起こしません。
マウスホイールイベント処理方法を追加します
まず、Webページに画像を追加し、マウスホイールを使用してこの画像のズームを後で制御できます。
<img id = myimage src = myimage.jpg alt = my image />
次に、マウスホイールイベント処理コードを追加します
var myimage = document.getElementById（myimage）;
if（myimage.addeventlistener）{
// IE9、Chrome、Safari、Opera
myimage.addeventlistener（マウスホイール、マウスホイールハンドラー、false）;
// firefox
myimage.addeventlistener（dommouseScroll、mousewheelhandler、false）;
}
// IE 6/7/8
else myimage.attachevent（onmousewheel、mousewheelhandler）;
さまざまなブラウザでサポートできる処理プラクティス
次の場合、Firefoxの詳細値を逆にし、1または-1のいずれかを返します
function mousewheelhandler（e）{
//クロスブラウザーホイールデルタ
var e = window.event || e; //古い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を返します。
}
最後の点では、Webページを上下にスライドした場合に備えて、標準のマウスホイールイベント処理を終了するために、この方法でfalseを返します。