JDまたはTaobaoの特定の製品は、虫眼鏡の効果があります。インターネットには多くの同様のプラグインがありますが、プロジェクトに適用する場合は多くの不便があります。同様のプラグインと蓄積されたコードを作成するのに時間がかかりました。どうしてそれをしないのか!!レットゴー：
この特殊効果をプラグインにカプセル化し、最初に最も基本的なアルゴリズムを実装し、次に段階的にカプセル化する予定です。
最終的な効果：
HTMLコード：
コードコピーは次のとおりです。
<div id = "magnifier"> </div>
CSSコード：
コードコピーは次のとおりです。
<style>
* {
マージン：0;
パディング：0;
}
</style>
何もないようです、私たちの強力なJSの旅を始めましょう：
JavaScriptコード：
コードコピーは次のとおりです。
関数CreateElement（Magnifierid、Simg、bimg）{
var magnifier = $（magnifierid）;
magnifier.style.position = 'relative';
// Small Picture Div
var smalldiv = $ create（ "div"）;
smalldiv.setattribute（ "id"、 "small"）;
smalldiv.style.position = "absolute";
//マスクレイヤー
var mask = $ create（ "div"）;
mask.setattribute（ "id"、 "mask"）;
mask.style.position = "absolute";
//レンズ
var mirror = $ create（ "div"）;
mirror.setattribute（ "id"、 "mirror"）;
mirror.style.opacity = 0.3;
mirror.style.position = "absolute";
mirror.style.display = "none";
//小さな写真
var smallimg = $ create（ "img"）;
smallimg.setattribute（ "src"、simg）;
smallimg.setattribute（ "id"、 "smallimg"）;
smallimg.onload = function（）{
//虫眼鏡の高さまたは幅が設定されていない場合は、小さな画像のサイズに応じて虫眼鏡のサイズを設定します
if（！magnifier.offsetheight）{
magnifier.style.width = this.offsetwidth+"px";
magnifier.style.height = this.offsetheight + "px";
}
//マスクレイヤーサイズは小さな画像と同じです
mask.style.opacity = "0";
mask.style.width = this.width + 'px';
mask.style.height = this.height + "px";
mask.style.zindex = 2;
bigdiv.style.left = this.width + 5 + "px";
bigdiv.style.top = "-5px";
}
Smalldiv.AppendChild（マスク）;
SmallDiv.AppendChild（Mirror）;
Smalldiv.AppendChild（Smallimg）;
// Windows
var bigdiv = $ create（ "div"）;
bigdiv.setattribute（ "id"、 "big"）;
bigdiv.style.position = "absolute";
bigdiv.style.overflow = "hidden";
bigdiv.style.display = "none";
var bigimg = $ create（ "img"）;
bigimg.setattribute（ "src"、bimg）;
bigimg.setattribute（ "id"、 "bigimg"）;
bigimg.style.position = "absolute";
bigdiv.appendchild（bigimg）;
Magnifier.AppendChild（SmallDiv）;
Magnifier.AppendChild（BigDiv）;
}
function setMagnifierStyle（MirrorStyle、Shichangstyle）{
//鏡
for（mirrirstyleのvarアイテム）{
mirror.style [item] = mirrerstyle [item];
}
for（shichangstyleのvarアイテム）{
$（ "Big"）。スタイル[item] = shichangstyle [item];
}
}
function RegisterEvent（）{
$（ "mask"）。onmouseover = function（）{
$（ "big"）。style.display = "block";
mirror.style.display = "block";
}
$（ "mask"）。onmouseout = function（）{
$（ "big"）。style.display = "none";
mirror.style.display = "none";
}
$（ "mask"）。onmousemove = function（evt）{
var oevent = evt ||イベント;
var disx = oevent.offsetx;
var disy = oevent.offsety;
var mirrirleft = disx -mirror.offsetwidth / 2;
var mirrortop = disy -mirror.offsetheight / 2;
if（mirrirleft <0）{
MirrorLeft = 0;
}
else if（mirrerleft> mask.offsetwidth -mirrer.offsetwidth）{
mirrerleft = mask.offsetwidth -mirrer.offsetwidth;
}
if（mirrortop <0）{
mirrortop = 0;
}
else if（mirrortop> mask.offseTheight -mirris.offseeth）{
mirrortop = mask.offseTheight -mirris.offseTheight;
}
mirror.style.top = mirrortop + "px";
mirror.style.left = mirrerleft + "px";
var pax = mirrortop /（mask.offseTheight -mirror.offseTheight）;
var pay = mirrerleft /（mask.offsetwidth -mirrer.offsetwidth）;
$（ "bigimg"）。style.top = -pax *（$（ "bigimg"）。offseetheight- $（ "big"）。
$（ "bigimg"）。style.left = -pay *（$（ "bigimg"）。offsetwidth -$（ "big"）。offsetWidth） + "px";
}
}
function $（id）{
document.getElementByID（ID）を返します。
}
function $ create（type）{
document.createelement（タイプ）を返します。
}
最後に、それをオンロードと呼びましょう：
コードコピーは次のとおりです。
window.onload = function（）{
createElement（ "magnifier"、 "images/magnifier/small.jpg"、 "images/magnifier/big.jpg"）;
setMagnifierStyle（{"width"： "30px"、 "height"： "30px"、 "backgroundcolor"： "#ffff"}、{"width"： "250px"、 "height"： "250px"}）;
RegisterEvent（）;
}
効果は最終的に計算されました。
2。次にそれをカプセル化しましょう：
マグニファークラスコード：
コードコピーは次のとおりです。
関数拡大器（
マグニフィアリド、//マグニファイアコンテナID
Simg、//小さな画像src
bimg、//大きな画像src
MirrorStyle、//小さな画像のレンズスタイル、JSON形式のデータ
ViewStyle //ウィンドウスタイルのプレビュー、JSON形式のデータ
）{
var _this = this;
this.magnifiercontainer = null; //容器
this.smalldiv = null; //小さな画像コンテナ
this.mask = null; //小さな画像マスクレイヤー
this.mirror = null; //小さな画像レンズ
this.smallimg = null; //小さな写真
this.bigdiv = null; //プレビュービュー
this.bigimg = null; //大きな画像
var init = function（）{
_this.magnifiercontainer = _this。$（magnifierid）;
_this.createelement（simg、bimg）;
_this.setmagnifierstyle（MirrorStyle、ViewStyle）;
_this.mainevent（）;
}
init（）;
}
MAGNIFIER.PROTOTYPE.CREATEELEMENT = function（simg、bimg）{
var _this = this;
var $ create = this。$ create;
this.magnifiercontainer.style.position = 'relative'; //ドキュメントフローから遠く離れて、必要に応じて変更する
this.smalldiv = $ create（ "div"）;
this.smalldiv.setattribute（ "id"、 "small"）;
this.smalldiv.style.position = "absolute";
this.mask = $ create（ "div"）;
this.mask.setattribute（ "id"、 "mask"）;
this.mask.style.position = "absolute";
this.mirror = $ create（ "div"）;
this.mirror.setattribute（ "id"、 "mirror"）;
this.mirror.style.opacity = 0.3;
this.mirror.style.position = "absolute";
this.mirror.style.display = "none";
this.smallimg = $ create（ "img"）;
this.smallimg.setattribute（ "src"、simg）;
this.smallimg.setattribute（ "id"、 "smallimg"）;
this.smallimg.onload = function（）{
//虫眼鏡の高さまたは幅が設定されていない場合は、小さな画像のサイズに応じて虫眼鏡のサイズを設定します
if（！_this.magnifiercontainer.offseeth）{
_this.magnifiercontainer.style.width = this.offsetwidth + "px";
_this.magnifiercontainer.style.height = this.offseetheight + "px";
}
//マスクレイヤーサイズは小さな画像と同じです
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetwidth + 'px';
_this.mask.style.height = this.offseeth + "px";
_this.mask.style.zindex = 2;
_this.bigdiv.style.left = this.offsetwidth + 5 + "px";
_this.bigdiv.style.top = "-5px";
}
this.smalldiv.appendchild（this.mask）;
this.smalldiv.appendchild（this.mirror）;
this.smalldiv.appendChild（this.smallimg）;
this.bigdiv = $ create（ "div"）;
this.bigdiv.setattribute（ "id"、 "big"）;
this.bigdiv.style.position = "absolute";
this.bigdiv.style.overflow = "hidden";
this.bigdiv.style.display = "none";
this.bigimg = $ create（ "img"）;
this.bigimg.setattribute（ "src"、bimg）;
this.bigimg.setattribute（ "id"、 "bigimg"）;
this.bigimg.style.position = "absolute";
this.bigdiv.appendchild（this.bigimg）;
this.magnifiercontainer.appendChild（this.smalldiv）;
this.magnifiercontainer.appendChild（this.bigdiv）;
}
MAGNIFIER.PROTOTYPE.SETMAGNIFIERSTYLE = FUNCTION（MirrorStyle、ViewStyle）{
for（mirrirstyleのvarアイテム）{
this.mirror.style [item] = mirrerStyle [item];
}
アイテムを削除します。
for（vir item in ViewStyle）{
this.bigdiv.style [item] = viewstyle [item];
}
}
MAGNIFIER.PROTOTYPE.MAINEVENT = function（）{
var _this = this;
this.mask.onmouseover = function（）{
_this.bigdiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = function（）{
_this.bigdiv.style.display = "none";
_this.mirror.style.display = "none";
}
this.mask.onmousemove = function（evt）{
var oevent = evt ||イベント;
var disx = oevent.offsetx || Oevent.layerx; // ff互換性
var disy = oevent.offsety || oevent.layery;
var mirrirleft = disx -_this.mirror.offsetwidth / 2;
var mirrortop = disy -_this.mirror.offseetheight / 2;
if（mirrirleft <0）{
MirrorLeft = 0;
}
else if（mirrerleft> this.offsetwidth- _this.mirror.offsetwidth）{
mirrerLeft = this.offsetWidth -mirrer.offsetWidth;
}
if（mirrortop <0）{
mirrortop = 0;
}
else if（mirrortop> this.offseetheight -_this.mirror.offseetheight）{
mirrortop = this.offseTheight -_this.mirror.offseTheight;
}
_this.mirror.style.top = mirrortop + "px";
_this.mirror.style.left = mirrerleft + "px";
var pax = mirrortop /（this.offseetheight -_this.mirror.offseetheight）;
var pay = mirrerleft /（this.offsetwidth -_this.mirror.offsetwidth）;
_this.bigimg.style.top = -pax *（_this.bigimg.offseTheight -_this.bigdiv.offseTheight） + "px";
_this.bigimg.style.left = -pay *（_this.bigimg.offsetwidth -_this.bigdiv.offsetwidth） + "px";
}
}
MAGNIFIER.PROTOTYTE。$ = function（id）{
document.getElementByID（ID）を返します。
}
MAGNIFIER.PROTOTYTE。$ create = function（type）{
document.createelement（タイプ）を返します。
}
最後に、オンロードコールの下で：
コードコピーは次のとおりです。
window.onload = function（）{
新しい拡大器（
「マグニフィア」、
「Images/Magnifier/Small.jpg」、
「Images/Magnifier/Big.jpg」、
{"width"： "30px"、 "height"： "30px"、 "backgroundcolor"： "#ffff"}、
{"width"： "250px"、 "height"： "250px"}
）;
}
上記はこの記事で説明されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。