Utilisez du javascript pur pour acquérir des compétences d'effet de loupe

Les produits spécifiques de JD ou Taobao ont un effet loupe. Bien qu'il existe de nombreux plug-ins similaires sur Internet, leur application à des projets présente de nombreux inconvénients. Si vous prenez le temps d'écrire vous-même un plug-in similaire et d'accumuler du code, pourquoi ne pas le faire ! 🎜>

Je prévois d'encapsuler cet effet spécial dans un plug-in. Implémentez d'abord l'algorithme le plus basique, puis l'encapsulez étape par étape :

Effet final :

Code HTML :

Copier le code Le code est le suivant :

code css :

Copier le code Le code est le suivant :

Il semble qu'il n'y ait rien, commençons notre puissant voyage js :

Code javascript :

Copier le code Le code est le suivant :

  function createElement (MagnifierId, sImg, bImg) {

            var Loupe = $(MagnifierId);

            Magnifier.style.position = 'relative';

            //小图div

            var smallDiv = $Create("div");

            smallDiv.setAttribute("id", "small");

            smallDiv.style.position = "absolu";

            //遮罩层

            var masque = $Create("div");

            masque.setAttribute("id", "masque");

            masque.style.position = "absolu";

            //镜Photo

            var miroir = $Create("div");

            miroir.setAttribute("id", "miroir");

            miroir.style.opacity = 0.3;

            miroir.style.position = "absolu";

            miroir.style.display = "aucun";

            //小图

            var smallImg = $Create("img");

            smallImg.setAttribute("src", sImg);

            smallImg.setAttribute("id", "smallImg");

            smallImg.onload = fonction () {

                //如果没设置放大镜的hauteur或者largeur 根据小图大小设置放大镜大小

                si (!Magnifier.offsetHeight) {

                    Magnifier.style.width = this.offsetWidth "px";

                    Magnifier.style.height = this.offsetHeight "px";

                >

                //遮罩层大小和小图一样

                masque.style.opacity = "0";

                masque.style.width = this.width 'px';

                masque.style.height = this.height "px";

                masque.style.zIndex = 2;

                bigDiv.style.left = this.width 5 "px";

                bigDiv.style.top = "-5px";

            >

            smallDiv.appendChild(masque);

            smallDiv.appendChild(miroir);

            smallDiv.appendChild(smallImg);

            //视窗

            var bigDiv = $Create("div");

            bigDiv.setAttribute("id", "big");

            bigDiv.style.position = "absolu";

            bigDiv.style.overflow = "caché";

            bigDiv.style.display = "aucun";
            var bigImg = $Create("img");

            bigImg.setAttribute("src", bImg);

            bigImg.setAttribute("id", "bigImg");

            bigImg.style.position = "absolu";

            bigDiv.appendChild(bigImg);

            Loupe.appendChild(smallDiv);

            Loupe.appendChild(bigDiv);

        >

        fonction setMagnifierStyle (mirrorStyle, shichuangStyle) {

            //miroir

            pour (élément var dans MirrorStyle) {

                miroir.style[élément] = miroirStyle[élément];

            >

            pour (article var dans shichuangStyle) {

                $("big").style[item] = shichuangStyle[item];

            >

        >

        fonction registerEvent() {

            $("mask").onmouseover = function () {

                $("big").style.display = "block";

                miroir.style.display = "bloc";

            >

            $("mask").onmouseout = function () {

                $("big").style.display = "aucun";

                miroir.style.display = "aucun";

            >

            $("mask").onmousemove = fonction (evt) {

                var oEvent = evt || événement ;

                var disX = oEvent.offsetX;

                var disY = oEvent.offsetY;

                var miroirLeft = disX - miroir.offsetWidth / 2;

                var miroirTop = disY - miroir.offsetHeight / 2;

                si (mirrorLeft < 0) {

                    miroirGauche = 0;

                >

                sinon si (mirrorLeft > masque.offsetWidth - miroir.offsetWidth) {

                    miroirLeft = masque.offsetWidth - miroir.offsetWidth;

                >

                si (mirrorTop < 0) {

                    miroirTop = 0;

                >

                sinon if (mirrorTop > mask.offsetHeight - miroir.offsetHeight) {

                    miroirTop = masque.offsetHeight - miroir.offsetHeight;
                >

                miroir.style.top = miroirTop "px";

                miroir.style.left = miroirLeft "px";

                var paX = miroirTop / (mask.offsetHeight - miroir.offsetHeight);

                var paY = miroirLeft / (mask.offsetWidth - miroir.offsetWidth);

                $("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) "px";

                $("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) "px";

            >

        >

        fonction $(id) {

            return document.getElementById(id);

        >

        fonction $Créer(type) {

            return document.createElement(type);

        >

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

复制代码代码如下 :

 window.onload = fonction () {

            createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");

            setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });

            registerEvent();

        >

效果总算出来了耶，

2. 接下来咱们封装吧：

Loupe类代码：

复制代码代码如下 :

fonction Loupe(

Magnifierid, // agrandissement de l'ID du conteneur miroir 

sImg,                                                                                                                                          
bImg,                                                                                                                                                                                                                                     parce que
MirrorStyle, // Dans le style d'objectif petite image, données au format json 

) {

               var _this = this;

This.MagnifierContainer = null; //Conteneur

This.smallDiv = null; //Petit conteneur d'images

This.mask = null; //Petit calque de masque d'image

            this.mirror = null;                                                                                                                                                                                                                        
This.smallImg = null; //Petite image

This.bigDiv = null ; //Vue d'aperçu

This.bigImg = null ;
            var init = fonction () {

                 _this.MagnifierContainer = _this.$(MagnifierId);

                    _this.createElement(sImg, bImg);

                  _this.setMagnifierStyle(mirrorStyle, ViewStyle);

                   _this.MainEvent();

            }

            init();

>

​ ​ Magnifier.prototype.createElement = fonction (sImg, bImg) {

               var _this = this;

            var $Create = this.$Create;

This.MagnifierContainer.style.position = 'relative'; //Sortez du flux de documents et modifiez-le si nécessaire

This.smallDiv = $Create("div");

This.smallDiv.setAttribute("id", "small");

This.smallDiv.style.position = "absolu";
This.mask = $Create("div");

This.mask.setAttribute("id", "mask");

This.mask.style.position = "absolu";

This.mirror = $Create("div");

This.mirror.setAttribute("id", "mirror");

This.mirror.style.opacity = 0.3;

This.mirror.style.position = "absolu";

This.mirror.style.display = "aucun";

This.smallImg = $Create("img");

This.smallImg.setAttribute("src", sImg);

This.smallImg.setAttribute("id", "smallImg");

This.smallImg.onload = function () {

//Si la hauteur ou la largeur de la loupe n'est pas définie, définissez la taille de la loupe en fonction de la taille de la vignette 

Si (!_this.MagnifierContainer.offsetHeight) {

                     _this.MagnifierContainer.style.width = this.offsetWidth "px";

                      _this.MagnifierContainer.style.height = this.offsetHeight "px";

                }

//La taille du calque du masque est la même que celle de la petite image

                     _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 = "absolu";

This.bigDiv.style.overflow = "caché";

This.bigDiv.style.display = "aucun";

This.bigImg = $Create("img");

This.bigImg.setAttribute("src", bImg);

This.bigImg.setAttribute("id", "bigImg");

This.bigImg.style.position = "absolu";

This.bigDiv.appendChild(this.bigImg);

This.MagnifierContainer.appendChild(this.smallDiv);

This.MagnifierContainer.appendChild(this.bigDiv);

>
        Magnifier.prototype.setMagnifierStyle = fonction (mirrorStyle, ViewStyle) {

            pour (élément var dans MirrorStyle) {

                this.mirror.style[item] = miroirStyle[item];

            >

            supprimer l'élément ;

            pour (élément var dans ViewStyle) {

                this.bigDiv.style[item] = ViewStyle[item];

            >

        >

        Magnifier.prototype.MainEvent = function () {

            var _this = ceci;

            this.mask.onmouseover = function () {

                _this.bigDiv.style.display = "bloquer";

                _this.mirror.style.display = "bloquer";

            >

            this.mask.onmouseout = function () {

                _this.bigDiv.style.display = "aucun";

                _this.mirror.style.display = "aucun";

            >

            this.mask.onmousemove = fonction (evt) {

                var oEvent = evt || événement ;

                var disX = oEvent.offsetX || oEvent.layerX ;  //兼容ff

                var disY = oEvent.offsetY || oEvent.layerY;

                var miroirLeft = disX - _this.mirror.offsetWidth / 2;

                var miroirTop = disY - _this.mirror.offsetHeight / 2;

                si (mirrorLeft < 0) {

                    miroirGauche = 0;

                >

                sinon if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {

                    miroirLeft = this.offsetWidth - miroir.offsetWidth;

                >

                si (mirrorTop < 0) {

                    miroirTop = 0;

                >

                sinon if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {

                    miroirTop = this.offsetHeight - _this.mirror.offsetHeight;

                >

                _this.mirror.style.top = miroirTop "px";

                _this.mirror.style.left = miroirLeft "px";

                var paX = miroirTop / (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 () {

            新的放大鏡(

                       「放大鏡」，

                       「影像/放大鏡/small.jpg」，

                       「以影像/放大鏡/big.jpg》，

                        { "寬度": "30px", "高度": "30px", "背景顏色": "#fff" },
,

                        { "寬度": "250px", "高度": "250px" }

                );

}

以上就是本文所述的全部了，希望大家能夠喜歡。

Utilisez du javascript pur pour acquérir des compétences d'effet de loupe_javascript