js-magnifying glass effect_html/css_WEB-ITnose

JD or Taobao’s specific products have a magnifying glass effect. Although there are many similar plug-ins on the Internet, there are many inconveniences in applying them to projects. If you take some time to write a similar plug-in yourself and accumulate the code, why not do it!! let'go:

1. I plan to encapsulate this special effect into a plug-in. First implement the most basic algorithm, and then encapsulate it step by step:

Final effect:

html code:

<div id="Magnifier"></div>

css code:

 <style>        * {            margin: 0;            padding: 0;        }    </style>

It seems there is nothing, let’s start with our powerful js journey:

javascript code:

  function 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);        }        function setMagnifierStyle(mirrorStyle,shichuangStyle) {                            //mirror            for (var item in mirrorStyle) {                mirror.style[item] = mirrorStyle[item];            }            for (var item in shichuangStyle) {                $("big").style[item] = shichuangStyle[item];            }                   }        function 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 || event;                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";            }        }        function $(id) {            return document.getElementById(id);        }        function $Create(type) {            return document.createElement(type);        }

Finally, make a small onload call:

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

The effect is finally out,

2. Next let’s encapsulate:

Magnifer class code:

        function Magnifier(            MagnifierId,                            //放大镜容器ID            sImg,                                   //小图片src            bImg,                                   //大图片src            mirrorStyle,                            //小图片里镜片样式，json格式数据            ViewStyle                               //预览视窗样式，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 = "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 () {                //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小                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 = "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 = function (mirrorStyle, ViewStyle) {            for (var item in mirrorStyle) {                this.mirror.style[item] = mirrorStyle[item];            }            delete item;            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 = function (evt) {                var oEvent = evt || event;                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 = 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.$ = function (id) {            return document.getElementById(id);        }        Magnifier.prototype.$Create = function (type) {            return document.createElement(type);        }

Finally under the onload call:

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