多くの場合、ショッピングWebサイトの製品ページに製品ディスプレイエリアがあります。この画像領域の1つの関数は、製品画像の拡大関数です。左側の焦点領域を移動して、詳細を拡大し、詳細を表示します。詳細は次のとおりです。この関数を実装する方法も非常に簡単です。
実験：製品フォーカスの拡大画像を作成します。
必要なスキル：
1。ページ要素を取得するための基本的な方法。
2。いくつかの簡単なイベント。
3. DOMを使用して、要素の属性を設定します。
ケースの原則：
1.フォーカスボックスのマウスイベントに従ってください。
2。フォーカスボックスの移動領域に関する規制。
3。大きな箱の内容の表示。
適しています：JS初心者
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -始める！ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.最初に、CSSスタイルを準備します。 CSSスタイルで注意を払う必要があるいくつかのポイントは次のとおりです。
（1）フォーカスマップは位置に関連しています、デフォルト表示：なし。
（2）右側の大きな画像を示すボックス（以下、大きな画像フレームと呼ばれる）デフォルト表示：なし。大きな画像フレームのコンテンツは、オーバーフローの後に非表示にする必要があります。
2。スクリプトコードの書き込みを開始します：
（1）最初にページ要素を取得します：
//まず、操作する要素関数getID（タグ）{// IDで要素を取得するメソッドを定義します。これにより、多くのワークロードが減少します！ document.getElementById（タグ）} var box = getId（ "box"）; var small = getId（ "small"）; var mask = getId（ "mask"）; var big = getId（ "big"）; var pic = big.children [0]; //ここでは、ノードメソッドを介して要素を取得します（2）マウスが小さな画像に移動したときに2つのイベントが表示されることを確認してください。1）フォーカスボックスを表示する必要があります。 2）大きな画像ボックスを表示する必要があります。同様に、マウスを取り外した後、これらの2つの葉をキャンセルする必要があります。
//マウスを写真に移動すると2つの効果が表示されます。 big.style.display = "block"; } small.onmouseout = function（）{mask.style.display = "none"; big.style.display = "none"}（3）フォーカスボックスの以下を設定します。
1）フォーカスボックスが設定されている場合、次の時間は事実であるため、ここのイベントタイプはマウスオーバーではありません。しかし、onmousemove;
2）このコードに伴う問題は、主にマスク（フォーカスボックス）ポジショニング計算の問題です。無視しやすい問題は、マスクがどの位置に移動するかということですか？私のCSSスタイルでは、マスクは小さなボックスに配置されているため、相対的な移動位置は、配置された親要素の位置でなければなりません。したがって、ブラウザの現在のウィンドウに対してclientxおよびclientyを使用する位置座標は直接使用できず、親ボックスのマージン値の影響を差し引く必要があります。
//小さな画像のフォーカスボックスを設定し、マウスに従います。 small.onmousemove = function（e）{var marginl = box.offsetLeft; // offsetLeftメソッドを使用して、box var margint = box.offsettopのマージン左側を取得します。 //オフセットメソッドを使用して、ボックスのマージントップを取得var currentx = e.clientx; var currenty = e.clienty; //ブラウザの左上隅に比べてE.clinetyおよびE.clinetyを使用しますvar x = currentx-marginl-mask.offsetwidth/2; var y = culerny-margint-mask.offseetheight/2; //フォーカスボックスの中心をマウスに合わせるには、フォーカスの幅と高さの半分を差し引く必要があります 箱/ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------（4）アイドルフォーカスボックスの位置の動き
1）前のステップが完了した後、フォーカスボックスの動きはアイドル状態ではありません。ショッピングWebサイトを閲覧する過程で、フォーカスボックスは小さな画像の外側の動きを許可しないため、ユーザーエクスペリエンスが悪いと感じることができます。
2）主にxとyの変化が許容値を超えた場合、フォーカスボックスの動きを制限するには、固定値を与えます。
//小さな画像のフォーカスボックスを設定し、マウスに従います。 small.onmousemove = function（e）{var marginl = box.offsetLeft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth/2; var y = culerny-margint-mask.offseetheight/2; //フォーカスボックスの移動領域を設定するif（x <0）{x = 0;} if（x> small.offsetwidth-mask.offsetwidth）{x = small.offsetwidth-mask.offsetwidth}; //位置決めに使用されるxの最小値は0で、最大値は小マスク長y軸の長さです。 y軸にも同じことが言えます。（y <0）{y = 0;} if（y> small.offseetheight-mask.offseetheight）{y = small.offseTheeth-mask.offseTheight}; mask.style.left = x+"px"; //移動領域は移動領域が指定された後に記述され、コードmask.style.top = y+"px"の実行順序に注意を払うことに注意してください。（5）大きな画像の表示を設定します
1）大きなボックス内の写真の動きを実現するには、-marginの値を考える必要があります。
2）移動できる距離を使用して、マスクの左値と上位値に固定比率を掛けることができます。フォーカスエリアの左上隅に表示される位置と、大きな画像フレームの左上隅が同じです！ ！ ！これを理解するのはそれほど難しくありません。
//ビッグボックスに表示されているコンテンツを設定var relativex = mask.offsetLeft; var reartyy = mask.offsettop; var proporationx = pic.offsetwidth/small.offsetwidth; //比率を設定するvar proporationy = pic.offseeth/small.offsetwidth; pic.style.marginLeft = -RELATIANX*proporationx+"px"; //注記！マージンの値は負でなければなりません。「pxはpic.style.margintop = -relativey*proporation+"px"を捨てないでください。
この時点で、デモが終了しました！とてもシンプルではありません
以下のコード全体を貼り付けて、あなたと話し合い、コミュニケーションをとることを望んでいます。
これがCSSコードです
<style> * {マージン：0;パディング：0; } #box {マージン：50px; } #small {width：229px;高さ：250px;ボーダー：1pxソリッドブラック。テキストアライグ：センター;位置：相対;フロート：左; } #mask {width：100px;高さ：100px;背景色：RGBA（214、111、193、0.3）;位置：絶対;上：0;左：0; /*表示：なし;*/} #big {width：350px;高さ：350px;ボーダー：1pxソリッドブラック。フロート：左;オーバーフロー：隠し; /*表示：なし;*/} </style>これがHTMLです
<body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </div> </div> <div id = "big"> <img src = "big_img.jpg"/>> </div> </div> <
これがJSコードです
<script> //まず、操作する要素getId（tag）{return document.getElementById（tag）} var box = getId（ "box"）; var small = getId（ "small"）; var mask = getId（ "mask"）; var big = getId（ "big"）; var pic = big.children [0]; console.log（pic）; //マウスが画像に移動し、2つの効果が小さく表示されます。 big.style.display = "block"; } small.onmouseout = function（）{mask.style.display = "none"; big.style.display = "none"} //小さな画像のフォーカスボックスを設定して、マウスに従います。 small.onmousemove = function（e）{var marginl = box.offsetLeft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth/2; var y = culerny-margint-mask.offseetheight/2; //フォーカスボックスの移動領域を設定するif（x <0）{x = 0;} if（x> small.offsetwidth-mask.offsetwidth）{x = small.offsetwidth-mask.offsetwidth}; if（y <0）{y = 0;} if（y> small.offseTheight-mask.offseTheight）{y = small.OffsEtheight-mask.offsEtheight}; mask.style.left = x+"px"; mask.style.top = y+"px"; //大きなボックスに表示されているコンテンツを設定var relativex = mask.offsetLeft; var reartyy = mask.offsettop; var reartyy = mask.offsettop; var proporationx = pic.offsetwidth/small.offsetwidth; var proporationy = pic.offseeth/small.offsetwidth; pic.style.marginLeft = -RELATIANX*proporationx+"px"; pic.style.margintop = -relativey*proporation+"px"; } </script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。