純粋な JavaScript を使用して虫眼鏡効果を達成する_JavaScript スキル

JD または淘宝網の特定の商品には虫眼鏡効果があります。インターネット上には同様のプラグインが多数ありますが、プロジェクトに適用するには不便な点が多いため、時間をかけて自分で同様のプラグインを作成してコードを蓄積してみてはいかがでしょうか。 🎜>

この特殊効果をプラグインにカプセル化する予定です。最初に最も基本的なアルゴリズムを実装し、それから段階的にカプセル化します。

最終効果:

html コード:

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

CSS コード:

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

<スタイル>
* {
マージン: 0;
パディング: 0;
}

何もないようです。強力な JS の旅を始めましょう:

JavaScript コード:

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

  function createElement(MagnifierId, sImg, bImg) {
            var Magnifier = $(MagnifierId);
            Magnifier.style.position = '相対';
            //小图div
            var smallDiv = $Create("div");
            smallDiv.setAttribute("id", "small");
            smallDiv.style.position = "絶対";
            //遮罩层
            var マスク = $Create("div");
            マスク.setAttribute("id", "マスク");
            マスク.スタイル.ポジション = "絶対";
            //镜片
            var ミラー = $Create("div");
            ミラー.setAttribute("id", "ミラー");
            ミラー.スタイル.不透明度 = 0.3;
            ミラー.スタイル.ポジション = "絶対";
            Mirror.style.display = "なし";
            //小图
            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";
                }
                //遮罩层大和小图一样
                マスク.スタイル.不透明度 = "0";
                マスク.スタイル.幅 =​​ this.width 'px';
                マスク.スタイル.高さ = this.高さ "px";
                マスク.スタイル.zIndex = 2;
                bigDiv.style.left = this.width 5 "px";
                bigDiv.style.top = "-5px";
            }
            smallDiv.appendChild(マスク);
            smallDiv.appendChild(ミラー);
            smallDiv.appendChild(smallImg);
            //ビデオ
            var bigDiv = $Create("div");
            bigDiv.setAttribute("id", "big");
            bigDiv.style.position = "絶対";
            bigDiv.style.overflow = "非表示";
            bigDiv.style.display = "なし";
            var bigImg = $Create("img");
            bigImg.setAttribute("src", bImg);
            bigImg.setAttribute("id", "bigImg");
            bigImg.style.position = "絶対";
            bigDiv.appendChild(bigImg);
            Magnifier.appendChild(smallDiv);
            Magnifier.appendChild(bigDiv);
        }
        function setMagnifierStyle(mirrorStyle,shichuangStyle) {
            //ミラー
            for (mirrorStyle の var item) {
                ミラー.スタイル[アイテム] = ミラースタイル[アイテム];
            }
            for (shichuangStyle の var item) {
                $("big").style[item] = shichuangStyle[item];
            }
        }
        関数 registerEvent() {
            $("マスク").onmouseover = function () {
                $("big").style.display = "ブロック";
                Mirror.style.display = "ブロック";
            }
            $("マスク").onmouseout = function () {
                $("big").style.display = "なし";
                Mirror.style.display = "なし";
            }
            $("マスク").onmousemove = function (evt) {
                var oEvent = evt ||イベント;
                var disX = oEvent.offsetX;
                var disY = oEvent.offsetY;
                var MirrorLeft = disX - Mirror.offsetWidth / 2;
                var MirrorTop = disY - Mirror.offsetHeight / 2;
                if (mirrorLeft                     ミラー左 = 0;
                }
                else if (ミラー左 > マスク.オフセット幅 - ミラー.オフセット幅) {
                    ミラー左 = マスク.オフセット幅 - ミラー.オフセット幅;
                }
                if (mirrorTop                     ミラートップ = 0;
                }
                else if (ミラートップ > マスク.オフセット高さ - ミラー.オフセット高さ) {
                    ミラートップ = マスク.オフセット高さ - ミラー.オフセット高さ;
                }
                Mirror.style.top = MirrorTop "px";
                Mirror.style.left = ミラー左 "px";
                var paX = MirrorTop / (mask.offsetHeight - Mirror.offsetHeight);
                var paY = MirrorLeft / (mask.offsetWidth - Mirror.offsetWidth);
                $("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) "px";
                $("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) "px";
            }
        }
        関数 $(id) {
            return document.getElementById(id);
        }
        関数 $Create(type) {
            return document.createElement(type);
        }

最後に再び onload小小の调用一下：

复制代 代码如下:

 window.onload = function () {
            createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
            setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });
            registerEvent();
        }

效果总算出来了耶，

2. 次来咱们封装吧：

Magnifer类代码：

复制代码代码如下:

関数拡大鏡(
Magnifierid, // ミラーコンテナ ID を拡大します
Simg、 bimg、なぜなら MirrorStyle, // スモールピクチャーレンズスタイルでは、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 = "絶対";
This.mask = $Create("div");
This.mask.setAttribute("id", "mask");
This.mask.style.position = "絶対";
This.mirror = $Create("div");
This.mirror.setAttribute("id", "mirror");
This.mirror.style.opacity = 0.3;
This.mirror.style.position = "絶対";
This.mirror.style.display = "なし";
This.smallImg = $Create("img");
This.smallImg.setAttribute("src", sImg);
This.smallImg.setAttribute("id", "smallImg");
This.smallImg.onload = function () {
//虫眼鏡の高さまたは幅が設定されていない場合は、サムネイルのサイズに応じて虫眼鏡のサイズを設定します
If (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth "px";
_this.MagnifierContainer.style.height = this.offsetHeight "px";
}
//マスクレイヤーのサイズは小さい画像と同じです
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetWidth 'px';
_this.mask.style.height = this.offsetHeight "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 = "絶対";
This.bigDiv.style.overflow = "非表示";
This.bigDiv.style.display = "なし";
This.bigImg = $Create("img");
This.bigImg.setAttribute("src", bImg);
This.bigImg.setAttribute("id", "bigImg");
This.bigImg.style.position = "絶対";
This.bigDiv.appendChild(this.bigImg);
This.MagnifierContainer.appendChild(this.smallDiv);
This.MagnifierContainer.appendChild(this.bigDiv);
}
        Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) {
            for (mirrorStyle の var item) {
                this.mirror.style[アイテム] = ミラースタイル[アイテム];
            }
            アイテムを削除;
            for (ViewStyle の var item) {
                this.bigDiv.style[item] = ViewStyle[item];
            }
        }
        Magnifier.prototype.MainEvent = function () {
            var _this = this;
            this.mask.onmouseover = function () {
                _this.bigDiv.style.display = "ブロック";
                _this.mirror.style.display = "ブロック";
            }
            this.mask.onmouseout = function () {
                _this.bigDiv.style.display = "なし";
                _this.mirror.style.display = "なし";
            }
            this.mask.onmousemove = function (evt) {
                var oEvent = evt ||イベント;
                var disX = oEvent.offsetX || oEvent.layerX;  //兼容ff
                var disY = oEvent.offsetY || oEvent.layerY;
                var MirrorLeft = disX - _this.mirror.offsetWidth / 2;
                var MirrorTop = disY - _this.mirror.offsetHeight / 2;
                if (mirrorLeft                     ミラー左 = 0;
                }
                else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
                    ミラー左 = this.offsetWidth - ミラー.オフセット幅;
                }
                if (mirrorTop                     ミラートップ = 0;
                }
                else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {
                    ミラートップ = this.offsetHeight - _this.mirror.offsetHeight;
                }
                _this.mirror.style.top = ミラートップ "px";
                _this.mirror.style.left = ミラー左 "px";
                var paX = MirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
                var paY = MirrorLeft / (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.prototype.$ = 関数 (id) {
            return document.getElementById(id);
        }
        Magnifier.prototype.$Create = 関数 (型) {
            return document.createElement(type);
        }

最後にonload调用下：

复制代 代码如下:

window.onload = function () {
            新しい拡大鏡(
                        「拡大鏡」、
                        "images/Magnifier/small.jpg",
                        "images/Magnifier/big.jpg",
                        { "幅": "30px"、"高さ": "30px"、"backgroundColor": "#fff" },
                        { "幅": "250px"、"高さ": "250px" }
                );
        }

以上が本明細書に記載されている内容のすべてです。