使用纯javascript实现放大镜效果

222 阅读 0 评论 147 点赞

我是靠谱客的博主坚定百合，最近开发中收集的这篇文章主要介绍使用纯javascript实现放大镜效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:

打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：

最终实现效果：

html 代码：

复制代码代码如下:

css 代码：

复制代码代码如下:

 <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

貌似什么都没有，开始咱们强大的js之旅吧：

javascript 代码：

复制代码代码如下:

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

        }

最后再 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类代码：

复制代码代码如下:

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

        }

最后在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" }

                );

        }

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