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

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

最终实现效果：

html 代码：

css 代码：

貌似什么都没有，开始咱们强大的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" }
);
}