图片切换后无法正常显示图片放大的功能

Question

图片切换后无法正常显示图片放大的功能
以下是图片局部放大的js 用的是jq

var glass = function(id,dia,mr,shape){
        //参数初始化
        dia=dia==undefined?100:dia;
        mr=mr==undefined?2:mr,
        shape=shape==undefined?50:shape
        //找到当前对象,z-index底层对象1，放大镜2，复制对象3
        var _this = this;
        var dx1 = $("#"+id);
        var dx1width=parseInt(dx1.css("width").replace("px",""));
        var dx2 = dx1.clone();
        var gls = "
"
        var glsimg = ""
        dx2.attr("id",id+"clone")
        dx1.after(dx2);
        dx2.after(gls);
        var gls1 = $("#"+id+"gls");
        gls1.append(glsimg);
        var glsimg1 = $("#"+id+"glsimg");
        dx1.parent().css({
            "position":"relative"
        })
        dx1.css({
            "position":"absolute",
            "z-index":"1"
        })
        dx2.css({
            "width":dx1width,
            "position":"absolute",
            "z-index":"3",
            "opacity":"0",
            "cursor":"crosshair",
            "margin":dx1.css("margin"),
            "left":dx1.css("left"),
            "top":dx1.css("top"),
            "right":dx1.css("right"),
            "bottom":dx1.css("bottom"),
        })
        gls1.css({
            //"border":"1px solid lightgray",
            "width":dia+"px",
            "height":dia+"px",
            "border-radius":""+shape+"%",
            "position":"fixed",
            "z-index":"2",
            "overflow":"hidden",
            "display":"none",
            "background-color":"black"
        })
        glsimg1.css({
            "margin-left": dia/2+"px",
            "margin-top":dia/2+"px",
            "width":(dx1width*mr)+"px"
        })
        dx2.mousemove(function(e){
            var sy = $(document).scrollTop()
            var sx = $(document).scrollLeft()
            //定位放大镜的位置
            gls1.css({
                "top":e.pageY-(dia/2)-sy,
                "left":e.pageX-(dia/2)-sx
            })
            //放大图片的位移
            glsimg1.css({
                "margin-top":(dia/2)-e.offsetY*mr,
                "margin-left":(dia/2)-e.offsetX*mr
            })
        })
        dx2.mouseenter(function(){
            gls1.show();
        })
        dx2.mouseleave(function(){
            gls1.hide();
        })
    }

Answer 1

改成下面这样就行了，dx1width获取有问题，只有第一个是显示的，所以获取的width是显示宽度，其他都是隐藏的，获取到的是css中的width（100%），所以其他的宽度都是100。导致显示宽度只有100，鼠标在图片左边0-100的位置才显示

    window.glassWidth = 100;
    var glass = function (id, dia, mr, shape) {
        //参数初始化
        dia = dia == undefined ? 100 : dia;
        mr = mr == undefined ? 2 : mr,
            shape = shape == undefined ? 50 : shape
        //找到当前对象,z-index底层对象1，放大镜2，复制对象3
        var _this = this;
        var dx1 = $("#" + id);

        ///////这里有问题，
        var dx1width = parseInt(dx1.css("width").replace("px", ""));

        //这里做兼容，后续都使用第一张图片宽度
        if (dx1width > 100) window.glassWidth = dx1width;
        else dx1width = window.glassWidth

        ///////////
        var dx2 = dx1.clone();
        var gls = "<div id='" + id + "gls'></div>"
        var glsimg = "<img id='" + id + "glsimg' src='" + dx1.attr("src") + "'>"
        dx2.attr("id", id + "clone")
        dx1.after(dx2);
        dx2.after(gls);
        var gls1 = $("#" + id + "gls");
        gls1.append(glsimg);
        var glsimg1 = $("#" + id + "glsimg");
        dx1.parent().css({
            "position": "relative"
        })
        dx1.css({
            "position": "absolute",
            "z-index": "1"
        })
        dx2.css({
            "width": dx1width,
            "position": "absolute",
            "z-index": "3",
            "opacity": "0",
            "cursor": "crosshair",
            "margin": dx1.css("margin"),
            "left": dx1.css("left"),
            "top": dx1.css("top"),
            "right": dx1.css("right"),
            "bottom": dx1.css("bottom"),
        })
        gls1.css({
            //"border":"1px solid lightgray",
            "width": dia + "px",
            "height": dia + "px",
            "border-radius": "" + shape + "%",
            "position": "fixed",
            "z-index": "2",
            "overflow": "hidden",
            "display": "none",
            "background-color": "black"
        })
        glsimg1.css({
            "margin-left": dia / 2 + "px",
            "margin-top": dia / 2 + "px",
            "width": (dx1width * mr) + "px"
        })
        dx2.mousemove(function (e) {
            var sy = $(document).scrollTop()
            var sx = $(document).scrollLeft()
            //定位放大镜的位置
            gls1.css({
                "top": e.pageY - (dia / 2) - sy,
                "left": e.pageX - (dia / 2) - sx
            })
            //放大图片的位移
            glsimg1.css({
                "margin-top": (dia / 2) - e.offsetY * mr,
                "margin-left": (dia / 2) - e.offsetX * mr
            })
        })
        dx2.mouseenter(function () {
            gls1.show();
        })
        dx2.mouseleave(function () {
            gls1.hide();
        })
    }