JavaScript を使用してページ ズーム機能を実装する

現代の Web デザインでは、ユーザー エクスペリエンスは重要な部分です。さまざまなデバイスや画面サイズのユーザーのニーズに適応するために、多くの場合、ページを拡大縮小する必要があります。今回はJavaScriptを使用してページズーム機能を実装してみます。

HTML のスケーリング機能は、ビューポートを設定することで CSS で実装されます。ただし、場合によっては、ユーザーの操作に応じてページを動的に拡大縮小して調整する必要があります。現時点では、JavaScript を使用してページのズーム機能を実装できます。

まず、ページのズーム操作をトリガーするボタンを HTML ファイルに追加する必要があります。コードは次のとおりです。

放大 缩小

次に、ズーム機能を実装するための JavaScript コードを記述する必要があります。コードは次のとおりです。

// 获取当前页面的缩放比例 function getZoom() { return parseFloat(document.body.style.zoom) || 1; } // 设置页面的缩放比例 function setZoom(zoom) { document.body.style.zoom = zoom; } // 页面放大函数 function zoomIn() { var zoom = getZoom(); setZoom(zoom + 0.1); } // 页面缩小函数 function zoomOut() { var zoom = getZoom(); if (zoom > 0.2) { setZoom(zoom - 0.1); } }

上記のコードでは、4 つの関数を定義しました。getZoom は現在のページのズーム率を取得するために使用され、setZoom はページのズーム率を設定するために使用され、zoomIn ははページを拡大するために使用され、zoomOut はページを縮小するために使用されます。具体的な実装原則は、ページのズーム スタイルを変更することでズームを実現することです。

最後に、HTML ファイルの