HTML5 で画像のマウスによるズームインとズームアウトを実装すると、他の問題は発生しません_html/css_WEB-ITnose

あなたも私も、HTML5 Web ページにマウス ホイール イベントを追加すると、ユーザーが Web ページを操作しやすくなることを知っています。 HTML5 では、マウス ホイールは Web ページを上下にスライドさせるだけでなく、ビューの平面の拡大や縮小など、さらに多くの機能を実行することもできます。

ほとんどのブラウザはマウス ホイール イベントをサポートしているため、イベントがトリガーされるたびに、最初にマウス ホイールのサイズを表す WheelDelta という名前のプロパティを取得できます。変化。正の値はホイールが下にスライドすることを意味し、負の値はホイールが上にスライドすることを意味します。値の絶対値が大きいほど、スライド範囲が大きくなります。

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

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

マウス ホイール イベント処理メソッドを追加します

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

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

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

内容をクリップボードにコピーする XML/HTML コード

1. var myimage = document.getElementById( "myimage");

2. if (myimage.addEventListener) {

3. // IE9、Chrome、Safari、Opera

4. myimage.addEventListener("mousewheel", MouseWheelHandler, false);

5. // Firefox

6. myimage.addEventListener ("DOMMouseScroll", MouseWheelHandler, false);

7. }

8. // IE 6/7/8

9. else myimage.attachEvent("onmousewheel", MouseWheelHandler);

異なるブラウザが処理メソッドをサポートできるようにするため

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

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

1. 関数MouseWheelHandler( e) {

2. // クロスブラウザ ホイール デルタ

3. var e = window.event || e; support

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";

2. return false;

3. }

4. 最後のポイントは、Web ページが上下にスライドするのを防ぐために、標準のマウス ホイール イベント処理を終了するメソッドで false を返します。

記事はインターネットからのものです。あなたの権利が侵害されている場合は、時間内に QQ: 123464386 にご連絡ください。できるだけ早く対応いたします。