HTML5 を使用して、マウスホイールを使用して画像を拡大・縮小する機能を実装する events_html5 チュートリアル スキル

あなたも私も、HTML5 Web ページにマウス ホイール イベントを追加すると、ユーザーが Web ページをより適切に操作できるようになることを知っています。 HTML5 では、マウス ホイールは Web ページを上下にスライドさせるだけでなく、表示面のズームインやズームアウトなど、さらに多くの機能を実行することもできます。

実際のデモ効果を見てください
ほとんどのブラウザはマウス ホイール イベントをサポートしているため、イベントがトリガーされるたびに、最初にマウス ホイール イベント メソッドをサブスクライブできます。wheelDelta という名前の属性を取得できます。 、これは変更されたばかりのマウス ホイールのサイズを表します。正の値はホイールが下にスライドすることを意味し、負の値はホイールが上にスライドすることを意味します。値の絶対値が大きいほど、スライド範囲が大きくなります。

しかし、残念なことに、マウス ホイール イベントをサポートしていないブラウザがまだ存在します。それがファイアフォックスです。 Mozilla は「DOMMouseScroll」と呼ばれるイベント処理を実装しています。これは、detail 属性を持つevent という名前のイベントパラメータを渡します。ただし、この詳細属性は、wheelDelta とは異なり、正の値のみを返すことができます。マウスホイールを下にスクロールします。

Apple は Safari ブラウザでのページの上下スライドを制御するためにマウス スクロールも無効にしましたが、この機能は Webkit エンジンで通常どおり使用されているため、作成したコードはトリガーされないという事実に特に注意する必要があります。何か問題があれば。

マウス ホイール イベント処理メソッドを追加します
最初に Web ページに画像を追加し、後でマウス ホイールを使用して画像のズームを制御できます

XML/HTML コードコンテンツをクリップボードにコピー

1. <img id="myimage" src="myimage.jpg" alt=「私の画像」 />

次に、マウス ホイール イベント処理コードを追加します

XML/HTML コードコンテンツをクリップボードにコピー

1. var myimage = ドキュメント.getElementById("myimage"); >
if (myimage.addEventListener) {
// IE9、Chrome、Safari、Opera
myimage.addEventListener("マウスホイール", MouseWheelHandler, false);
4. // Firefox
5. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
6. }
7. // IE 6/7/8
8. else myimage.attachEvent("onmousewheel", MouseWheelHandler);
9. さまざまなブラウザをサポートするため

次の場合、Firefox の詳細値を反転して 1 または -1 のいずれかを返します

XML/HTML コード

コンテンツをクリップボードにコピー

1. 関数 MouseWheelHandler(e) {
2. // クロスブラウザホイールデルタ
3. var e = window.event || 古い IE サポート
4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta) || -e.detail)));

ここで、画像のサイズ範囲を直接決定します。次のコードは、画像の幅の範囲を 50 ～ 800 ピクセルに設定します

XML/HTML コード

コンテンツをクリップボードにコピー

1. myimage.style.width = Math.max(50, Math.min(800) 、myimage.width (30 * デルタ))) "px"; は false を返します。 }
3. 最後のポイントは、Web ページが上下にスライドするのを防ぐために、標準のマウス ホイール イベント処理を終了するメソッドで false を返します。 実際のデモを見る