使用纯javascript实现放大镜效果(3)

        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调用下：

复制代码 代码如下: