Verwenden Sie reines Javascript, um Javascript-Fähigkeiten mit Lupeneffekt zu erlangen

Die spezifischen Produkte von JD oder Taobao haben einen Lupeneffekt. Obwohl es viele ähnliche Plug-Ins im Internet gibt, gibt es viele Unannehmlichkeiten, sie auf Projekte anzuwenden. Wenn Sie sich etwas Zeit nehmen, um selbst ein ähnliches Plug-In zu schreiben und Code anzusammeln, warum nicht? 🎜>

Ich habe vor, diesen Spezialeffekt in ein Plug-In zu kapseln. Implementieren Sie zunächst den grundlegendsten Algorithmus und kapseln Sie ihn dann Schritt für Schritt:

Endeffekt:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

CSS-Code:

Code kopieren Der Code lautet wie folgt:

          * {
              Rand: 0;
              padding: 0;
}

Es scheint, als gäbe es nichts. Beginnen wir unsere leistungsstarke JS-Reise:

Javascript-Code:

Code kopieren Der Code lautet wie folgt:

  Funktion createElement(MagnifierId, sImg, bImg) {
            var Magnifier = $(MagnifierId);
            Magnifier.style.position = 'relative';
            //小图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 () {
                //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
                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(mask);
            smallDiv.appendChild(mirror);
            smallDiv.appendChild(smallImg);
            //视窗
            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);
        }
        Funktion setMagnifierStyle(mirrorStyle,shichuangStyle) {
            //Spiegel
            for (var item in MirrorStyle) {
                Mirror.style[item] = MirrorStyle[item];
            }
            for (var item in shichuangStyle) {
                $("big").style[item] = shichuangStyle[item];
            }
        }
        Funktion 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 || Ereignis;
                var disX = oEvent.offsetX;
                var disY = oEvent.offsetY;
                var MirrorLeft = disX - Mirror.offsetWidth / 2;
                var MirrorTop = disY - Mirror.offsetHeight / 2;
                if (mirrorLeft < 0) {
                    MirrorLeft = 0;
                }
                else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {
                    MirrorLeft = mask.offsetWidth - Mirror.offsetWidth;
                }
                if (mirrorTop < 0) {
                    MirrorTop = 0;
                }
                else if (mirrorTop > mask.offsetHeight - mirror.offsetHeight) {
                    MirrorTop = mask.offsetHeight - Mirror.offsetHeight;
                }
                Mirror.style.top = MirrorTop "px";
                Mirror.style.left = MirrorLeft "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";
            }
        }
        Funktion $(id) {
            return document.getElementById(id);
        }
        Funktion $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类代码：

复制代码 代码如下:

Funktion Lupe(
Magnifierid, // Vergrößern der Spiegelcontainer-ID
sImg,                                                                                                                                    bImg,                                                                                                                                                                                                                          MirrorStyle, // Im Kleinbild-Objektivstil, Daten im JSON-Format
                                                                                                                                                 ) {
               var _this = this;
This.MagnifierContainer = null; //Container
This.smallDiv = null; //Kleiner Bildcontainer
This.mask = null; //Kleine Bildmaskenebene
            this.mirror = null;                                                                                                                                                                                                                   This.smallImg = null; //Kleines Bild
This.bigDiv = null; //Vorschauansicht
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'; //Verlassen Sie den Dokumentenfluss und ändern Sie ihn entsprechend
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 () {
//Wenn die Höhe oder Breite der Lupe nicht festgelegt ist, stellen Sie die Größe der Lupe entsprechend der Größe des Miniaturbilds ein
If (!_this.MagnifierContainer.offsetHeight) {
                     _this.MagnifierContainer.style.width = this.offsetWidth "px";
                      _this.MagnifierContainer.style.height = this.offsetHeight "px";
                }
//Die Größe der Maskenebene entspricht der des kleinen Bildes
                     _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 = "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 = Funktion (mirrorStyle, ViewStyle) {
            for (var item in MirrorStyle) {
                this.mirror.style[item] = MirrorStyle[item];
            }
            Element löschen;
            for (var 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 = Funktion (evt) {
                var oEvent = evt || Ereignis;
                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) {
                    MirrorLeft = 0;
                }
                else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
                    MirrorLeft = this.offsetWidth - Mirror.offsetWidth;
                }
                if (mirrorTop < 0) {
                    MirrorTop = 0;
                }
                else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {
                    MirrorTop = this.offsetHeight - _this.mirror.offsetHeight;
                }
                _this.mirror.style.top = mirrorTop "px";
                _this.mirror.style.left = MirrorLeft "px";
                var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
                var paY = miroirLeft / (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";
            >
        >
        Loupe.prototype.$ = fonction (id) {
            return document.getElementById(id);
        >
        Magnifier.prototype.$Create = fonction (type) {
            return document.createElement(type);
        >

最后在onload调用下：

复制代码 代码如下 :

window.onload = fonction () {
            nouvelle loupe (
                        "Loupe",
                        "images/Magnifier/small.jpg",
                        "images/Magnifier/big.jpg",
                        { "width": "30px", "height": "30px", "backgroundColor": "#fff" },
                        { "largeur": "250px", "hauteur": "250px" }
                );
        >

以上就是本文所述的全部内容了，希望大家能够喜欢。