Gunakan javascript tulen untuk mencapai kemahiran effect_javascript kaca pembesar

Produk khusus JD atau Taobao mempunyai kesan kaca pembesar. Walaupun terdapat banyak pemalam yang serupa di Internet, terdapat banyak kesulitan dalam menerapkannya pada projek Jika anda mengambil sedikit masa untuk menulis pemalam yang serupa dan mengumpul kod, mengapa tidak melakukannya!! 🎜>

Saya bercadang untuk merangkum kesan khas ini ke dalam pemalam Mula-mula melaksanakan algoritma yang paling asas, dan kemudian merangkumnya langkah demi langkah:

Kesan akhir:

kod html:

Salin kod Kod adalah seperti berikut:

kod css:

Salin kod Kod adalah seperti berikut:

          * {
              jidar: 0;
              pelapik: 0;
}

Nampaknya tiada apa-apa, mari mulakan perjalanan js kami yang hebat:

kod javascript:

Salin kod Kod adalah seperti berikut:

  fungsi createElement(MagnifierId, sImg, bImg) {
            var Magnifier = $(MagnifierId);
            Magnifier.style.position = 'relative';
            //小图div
            var smallDiv = $Create("div");
            smallDiv.setAttribute("id", "small");
            smallDiv.style.position = "mutlak";
            //遮罩层
            var mask = $Create("div");
            mask.setAttribute("id", "mask");
            mask.style.position = "mutlak";
            //镜片
            var mirror = $Create("div");
            mirror.setAttribute("id", "mirror");
            mirror.style.opacity = 0.3;
            mirror.style.position = "mutlak";
            mirror.style.display = "tiada";
            //小图
            var smallImg = $Create("img");
            smallImg.setAttribute("src", sImg);
            smallImg.setAttribute("id", "smallImg");
            smallImg.onload = fungsi () {
                //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
                jika (!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(topeng);
            smallDiv.appendChild(cermin);
            smallDiv.appendChild(smallImg);
            //视窗
            var bigDiv = $Create("div");
            bigDiv.setAttribute("id", "big");
            bigDiv.style.position = "mutlak";
            bigDiv.style.overflow = "tersembunyi";
            bigDiv.style.display = "tiada";
            var bigImg = $Create("img");
            bigImg.setAttribute("src", bImg);
            bigImg.setAttribute("id", "bigImg");
            bigImg.style.position = "mutlak";
            bigDiv.appendChild(bigImg);
            Magnifier.appendChild(smallDiv);
            Magnifier.appendChild(bigDiv);
        }
        fungsi setMagnifierStyle(mirrorStyle,shichuangStyle) {
            //cermin
            untuk (item var dalam mirrorStyle) {
                mirror.style[item] = mirrorStyle[item];
            }
            untuk (item var dalam shichuangStyle) {
                $("besar").style[item] = shichuangStyle[item];
            }
        }
        function registerEvent() {
            $("topeng").onmouseover = fungsi () {
                $("big").style.display = "block";
                mirror.style.display = "block";
            }
            $("topeng").onmouseout = fungsi () {
                $("besar").style.display = "tiada";
                mirror.style.display = "tiada";
            }
            $("topeng").onmousemove = fungsi (evt) {
                var oEvent = evt || acara;
                var disX = oEvent.offsetX;
                var disY = oEvent.offsetY;
                var mirrorLeft = disX - mirror.offsetWidth / 2;
                var mirrorTop = disY - mirror.offsetHeight / 2;
                jika (cermin Kiri                     mirrorLeft = 0;
                }
                else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {
                    mirrorLeft = mask.offsetWidth - mirror.offsetWidth;
                }
                jika (mirrorTop                     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";
            }
        }
        fungsi $(id) {
            kembalikan document.getElementById(id);
        }
        fungsi $Create(type) {
            kembalikan document.createElement(type);
        }

最后再 onload小小的调用一下：

复制代码 代码如下:

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

效果总算出来了耶，

2. 接下来咱们封装吧：

Magnifer类代码：

复制代码 代码如下:

fungsi Pembesar(
Pembesar, // membesarkan ID bekas cermin
sImg,                                                                                                                                                                                                                                                                                                                                         bImg,                                                                                                                                                                                                                                                                                                                                                                                                                                                    MirrorStyle, // Dalam gaya kanta gambar kecil, data format json
                                                                                                                                                                                                                                                                                                                                      ) {
               var _ini = ini;
This.MagnifierContainer = null; //Bekas
This.smallDiv = null; //Bekas imej kecil
This.mask = null; //Lapisan topeng imej kecil
            this.mirror = null;                                                                                                                                                                                                                                                                                                                                                                                               This.smallImg = null; //Imej kecil
This.bigDiv = null; //Pratonton paparan
This.bigImg = null;             var init = fungsi () {
                 _this.MagnifierContainer = _this.$(MagnifierId);
                    _this.createElement(sImg, bImg);
                  _this.setMagnifierStyle(mirrorStyle, ViewStyle);
                   _this.MainEvent();
            }
            init();
}
​ ​ Magnifier.prototype.createElement = fungsi (sImg, bImg) {
               var _ini = ini;
            var $Create = ini.$Create;
This.MagnifierContainer.style.position = 'relative'; //Keluar daripada aliran dokumen dan ubah suai mengikut kesesuaian
This.smallDiv = $Create("div");
This.smallDiv.setAttribute("id", "small");
This.smallDiv.style.position = "mutlak";
This.mask = $Create("div");
This.mask.setAttribute("id", "mask");
This.mask.style.position = "mutlak";
This.mirror = $Create("div");
This.mirror.setAttribute("id", "mirror");
This.mirror.style.opacity = 0.3;
This.mirror.style.position = "mutlak";
This.mirror.style.display = "tiada";
This.smallImg = $Create("img");
This.smallImg.setAttribute("src", sImg);
This.smallImg.setAttribute("id", "smallImg");
This.smallImg.onload = fungsi () {
//Jika ketinggian atau lebar kaca pembesar tidak ditetapkan, tetapkan saiz kaca pembesar mengikut saiz lakaran kecil
Jika (!_this.MagnifierContainer.offsetHeight) {
                     _this.MagnifierContainer.style.width = this.offsetWidth "px";
                      _this.MagnifierContainer.style.height = this.offsetHeight "px";
                }
//Saiz lapisan topeng adalah sama dengan imej kecil
                     _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.cermin);
This.smallDiv.appendChild(this.smallImg);
This.bigDiv = $Create("div");
This.bigDiv.setAttribute("id", "big");
This.bigDiv.style.position = "mutlak";
This.bigDiv.style.overflow = "tersembunyi";
This.bigDiv.style.display = "tiada";
This.bigImg = $Create("img");
This.bigImg.setAttribute("src", bImg);
This.bigImg.setAttribute("id", "bigImg");
This.bigImg.style.position = "mutlak";
This.bigDiv.appendChild(this.bigImg);
This.MagnifierContainer.appendChild(this.smallDiv);
This.MagnifierContainer.appendChild(this.bigDiv);
}
        Magnifier.prototype.setMagnifierStyle = fungsi (mirrorStyle, ViewStyle) {
            untuk (item var dalam mirrorStyle) {
                this.mirror.style[item] = mirrorStyle[item];
            }
            padamkan item;
            untuk (item var dalam ViewStyle) {
                this.bigDiv.style[item] = ViewStyle[item];
            }
        }
        Magnifier.prototype.MainEvent = fungsi () {
            var _ini = ini;
            this.mask.onmouseover = fungsi () {
                _this.bigDiv.style.display = "block";
                _this.mirror.style.display = "block";
            }
            this.mask.onmouseout = fungsi () {
                _this.bigDiv.style.display = "tiada";
                _this.mirror.style.display = "tiada";
            }
            this.mask.onmousemove = fungsi (evt) {
                var oEvent = evt || acara;
                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;
                jika (cermin Kiri                     mirrorLeft = 0;
                }
                else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
                    mirrorLeft = this.offsetWidth - mirror.offsetWidth;
                }
                jika (mirrorTop                     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 = 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.$ = Funktion (id) {
            return document.getElementById(id);
        }
        Magnifier.prototype.$Create = Funktion (Typ) {
            return document.createElement(type);
        }

最后在onload调用下:

复制代码 代码如下:

window.onload = function () {
            neue Lupe(
                        „Lupe“,
                        "images/Magnifier/small.jpg",
                        "images/Magnifier/big.jpg",
                        { "width": "30px", "height": "30px", "backgroundColor": "#fff" },
                        { "width": "250px", "height": "250px" }
                );
        }

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