Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:08:55
Original
999 Leute haben es durchsucht

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" }
                );
        >

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage