jquery_jquery に基づく製品表示拡大鏡

コードをアップロードするだけです (合計でわずか 100 かかります)

コードをコピーします コードは次のとおりです:

$(document).ready(function() {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el( "container").style.width))) "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el ("container").style.height))) "px";
$("#oriImage").bind('mouseleave', function(event) {
_el("biggerPic" ).style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) "px"; ").style .marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) "px";
});
$ ("#oriImage").bind('mouseover', function(event) {
$("#oriImage").bind('mousemove', function(event) { // マウスの移動後オペレーション層へ LazyBind マウス移動イベント
var MouseX, MouseY;
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //IE6 以降のバージョンおよび GOOGLE ブラウザの場合
MouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage")
} else {//FF ブラウザでは、他の単位ではなくピクセルを追加する必要があります。
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
}
var playOffsetX = 0 - MouseX / _xPercent(_el("oriImage") .style.width, _el("biggerPic").style.width);
var playOffsetY = 0 - MouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height );
//大きい画像の X 座標が 0 より大きい場合、つまり、画像の X オフセットが表示されているコンテナを超えた場合、0 にリセットされます。 X オフセットにリセットされます。これは、ピクチャとコンテナの差の負の数です
if (playOffsetY && playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber (_el("container").style.width) )) {
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 "px" :
playOffsetX getOffsetNumber(_el("container") ).style.width) / 2 > 0 ? 0 "px" : playOffsetX getOffsetNumber(_el("container").style.width) / 2 "px"; /大きな画像のY座標が0より大きい場合は、上マージンで0にリセットされます。画像のYオフセットが表示されているコンテナを超えた場合、差分の負の数にリセットされます。画像とコンテナの間
if (playOffsetX && playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) {
_el("biggerPic").style.marginTop = playOffsetY > 0 "px" :
playOffsetNumber(_el("container").style.height) / 0 " px" : playOffsetY getOffsetNumber(_el("container").style.height ) / 2 "px";
return;
}
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic ").style.height) - getOffsetNumber(_el("container") .style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX >= 0 - (getOffsetNumber (_el("biggerPic").style.width) - getOffsetNumber(_el ("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) {
// alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2) ;
_el("biggerPic").style.marginLeft = playOffsetX > 0 "px" :
playOffsetX getOffsetNumber(_el("container").style.width) / 0 " px" : playOffsetX getOffsetNumber(_el("container").style.width ) / 2 "px";
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 "px" :
playOffsetY getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 "px" : playOffsetY getOffsetNumber(_el("container").style.height) / 2 "px";
}
});
});
まあ、上記は基本的に一般的なロジックです。ここで少し説明します。

1 これには FF3.0 と互換性のある CSS HACK がまだたくさんあることに気づいたはずです。 IE 6、
7、8、および chrome、その他は

2 をテストする時間がありませんでした。開発中、拡大された画像、つまり ID が bigPic の画像を移動するときに特別なものにする必要がある場合境界線までの
の処理は、左辺と上辺はゼロに戻すだけなので非常に簡単ですが、右辺と下辺は少し面倒です。現在の
画像に対する相対的なオフセットを計算する必要があります。コンテナ (つまり、コンテナの ID を持つ DIV) が 1 つあります。問題は、
固定値を使用してコンテナから画像の上または右のマージンを再カバーする場合、ユーザーがブラウズ中に
のような「フレーム スキップ」現象が発生します。その理由は、現在の画像のオフセットを決定するときに、操作中のコンテナ (つまり、DIV) に対するマウスの距離を使用していたためです。 ID「oriImage」) を判定条件として使用すると、後でこの方法では精度が不十分であることがわかりました
確かに、「フレームスキップ」が発生するため、この計画は放棄されました。現在使用されている方法は、マウスの位置を個別に判断し、
によって異なるロジックをトリガーすることです。コードは明確に記述されています。

3 ページがロードされ、マウスが操作レイヤーから離れたときに、大きな画像の位置が右下に設定されるのは、
で述べた「フレームスキップ」を回避するためです。 2点目は、条件判定を使用しているため、ユーザーが初めてマウス移動
イベントをトリガーした場合、ユーザーが操作レイヤーの右または下から入力すると、おそらく誤った表示が行われます。 > インターネット上で読み込み時に虫眼鏡レイヤーが直接非表示に設定される理由は、まだバグです。
誰かが正しい方法を指摘してくれることを願っています。

4 HTML は次のように記述されています。
以下は操作レイヤーとその中に配置された小さな画像の記述です。最近非常に怠けています。
< div id="oriImage" style=" カーソル:クロスヘア; 背景色: 黄色; オーバーフロー: 非表示; 幅: 150px; 高さ: 150px;">

以下はエフェクトレイヤーと全体像の書き方です。CSSは抽出されず、非常に面倒です

追記: 操作層の画像「oriImg」に加えて、各 HTML 要素の ID が必要です
虫眼鏡レイヤーのスタイルは JS で実装する必要がありましたが、私は怠け者でした
についての説明は終わりました。良い点については、私がフロントエンドに携わったばかりなので、欠点がたくさんあることを付け加えておきたいと思います。
不器用ではありますが、少なくとも私は自分で入力しました。将来必要になるかもしれない学生は私に直接聞いてください。