<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>拡大鏡</ TITLE>
<スタイル>
* {
マージン：0;
パディング：0;
}
/ * *画像3px /削除
IMG {
垂直整列：トップ。
}
/ *スタイルのコンテナ* /
.container {
幅：350px;
高さ：350px;
マージン：100ピクセル;
国境：1pxの固体#CCC。
位置：相対;
}
/ *マウスのスタイルボックス* /
.mouse {
位置：相対;
}
/ *ビッグマウスのスタイルボックス* /
.mouseBigSize {
幅：450px;
高さ：450px;
位置：絶対;
トップ：0;
左：370px;
国境：1pxの固体#CCC。
オーバーフロー：隠されました;
表示：なし;
}
/ *ボックスのピクチャースタイル内のビッグマウス* /
.mouseBigSizeのIMG {
位置：絶対;
トップ：0;
左：0;
}
/ *マスク層パターン* /
。マスク {
幅：100ピクセル;
高さ：100pxに。
背景：RGBA（255、255、0、0.4）。
位置：絶対;
トップ：0;
左：0;
カーソル：移動。
表示：なし;
}
</スタイル>
</ head>の
<身体>
<DIV CLASS = "コンテナ">
<！ - 小さなマウス - >
<DIV CLASS = "マウス">
<IMG SRC = "./画像/ mouse.jpg" ALT = "">
<！ - マスク層 - >
<DIV CLASS = "マスク"> </ div>
</ div>
<！ - ビッグマウス - >
<DIV CLASS = "mouseBigSize">
<IMG SRC = "./画像/ mouseBigSize.jpg" ALT = "">
</ div>
</ div>
<スクリプト>
// DOM要素を取得します。
せコンテナ= document.getElementsByClassName（ "コンテナ"）[0]; //最大ボックス
聞かせてマウス= document.getElementsByClassName（ "マウス"）[0]; //マウスの小さなボックスを取得
聞かせてmouseBigSize = document.getElementsByClassName（ "mouseBigSize"）[0]; //マウス大きな箱をゲット
//ボックス内に大きな画像を得るために、bigImg = mouseBigSize.children [0]せ
//取得したマスク層と、マスク= document.getElementsByClassName（「マスク」）[0]をしましょう
mouseoverイベントを追加する//小さなボックス
mouse.onmouseover =関数（）{
mask.style.display =「ブロック」。
mouseBigSize.style.display =「ブロック」。
}
//小さなボックスマウスアウトイベントに追加
mouse.onmouseout =関数（）{
mask.style.display =「なし」。
mouseBigSize.style.display =「なし」。
}
//は、x軸とy軸を初期化します
X = 0、Y = 0を聞かせて、
//小さなボックスのMouseMoveイベントに追加
mouse.onmousemove =関数（イベント）{
X = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2。
Y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2。
//境界判決
（X <0）であれば
{
X = 0。
}
もし（X> mouse.offsetWidth - mask.offsetWidth）
{
X = mouse.offsetWidth - mask.offsetWidth。
}
（Y <0）であれば
{
Y = 0。
}
もし（Y> mouse.offsetHeight - mask.offsetHeight）
{
Y = mouse.offsetHeight - mask.offsetHeight。
}
左とトップ//マスク層への再割り当て
mask.style.left = X + "ピクセル"。
mask.style.top = Y + "PX"。
/ *
計算：2人の蒸しパンの兄、弟食事を食べる4パンを食べるために食事、と尋ねた：弟今日は3個のパンを食べ、弟は、いくつかのパンを食べなければなりませんか？
彼らは4月22日倍の倍数を計算します
== 3 * 2 6
* /
/ *
図は、図の大/小箱=複数箱。
私たちは、その後、大きな画像の倍数* ==小さなマップが移動する距離を置きます
* /
bigImg.style.left = -x * mouseBigSize.offsetWidth / mouse.offsetWidth + "PX"。
bigImg.style.top = -y * mouseBigSize.offsetHeight / mouse.offsetHeight + "PX"。
}
</ SCRIPT>
</ BODY>
</ HTML>