HTML5を使用して、マウスホイールイベントで写真を拡大および削減する機能を実現します

あなたと私は、HTML5 Webページにマウスホイールイベントを追加すると、ユーザーがWebページと対話できるようにすることができることを知っています。 HTML5では、マウススクロールホイールは、Webページを上下にスライドさせるだけではありません。実際、これに依存して、ビューフィールドの拡大や縮小など、より多くの機能を完了することもできます。

実際のデモンストレーション効果をご覧ください

ほとんどのブラウザはマウスホイールイベントをサポートするため、最初にマウスホイールイベントメソッドを購読できます。イベントがトリガーされるたびに、Mouse Wheelのサイズを表すWheeldeltaというプロパティを取得できます。正の値は、スクロールホイールが滑り落ちることを示し、負の値はスクロールホイールがスライドすることを示します。値の絶対値が大きいほど、スライド範囲が大きくなります。

残念ながら、マウスホイールイベントをサポートしていないブラウザはまだあります。それはFirefoxです。 Mozillaは、DommouseScrollと呼ばれるイベントの処理を実装しました。これは、詳細と呼ばれるプロパティを使用してイベントというイベントというイベントパラメーターを渡します。ただし、この詳細プロパティは、ホイールデルタとは異なり、正の値のみを返すことができます。つまり、マウスホイールの値が下にスクロールすることのみを主張することしかできません。

Appleはマウススクロールを無効にしてSafariブラウザーで上下にスライドするページを制御することに特に注意する必要がありますが、この機能はまだWebKitエンジンで通常使用されているため、記述したコードは問題を引き起こしません。

まず、Webページに画像を追加し、マウスホイールを使用してこの画像のズームを後で制御できます。