js-放大鏡效果

時間 2019-12-12

原文原文鏈接

jd或者淘寶的具體商品有個放大鏡的效果。雖然網上相似插件琳琅滿目，應用到項目上有諸多不便，本身抽點時間本身寫了個相似插件，積累下代碼，何樂而不爲呢!!let‘go:javascript

打算把此特效封裝成個插件，先把最基本的算法實現，而後再一步步封裝吧：

最終實現效果：css

html 代碼：html

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

View Code

css 代碼：java

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

View Code

貌似什麼都沒有，開始我們強大的js之旅吧：算法

javascript 代碼：json

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

View Code

最後再 onload小小的調用一下：app

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

View Code

效果總算出來了耶，ide

2. 接下來我們封裝吧：this

Magnifer類代碼：spa

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

View Code

最後在onload調用下：

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

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。