西西木科技丨Shopify开发机构 2022-11-25 04:49 采纳率: 96.4%
浏览 6
已结题

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

图片切换后无法正常显示图片放大的功能
以下是图片局部放大的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(); }) }
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-11-25 10:01
    关注

    改成下面这样就行了,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();
            })
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月27日
  • 已采纳回答 11月27日
  • 创建了问题 11月25日

悬赏问题

  • ¥15 树莓派启动AP热点传入数据
  • ¥15 multisim中关于74ls192n和DSWPK开关的问题(相关搜索:计数器)
  • ¥15 在误装Windows server2019 后如何利用Windows.old恢复?
  • ¥20 代码实现状态连接包过滤防火墙的设计与实现
  • ¥15 vscode的红色箭头爆红和has no default export报错
  • ¥15 关于#sql#的问题:#情况描述 在用vs对项目进行调试时,出现找不到网络路径,然后查看SQL配置工具,发现SQL服务显示远程调用过程失败(相关搜索:防火墙)
  • ¥15 eNSP中基于默认路由及浮动路由的公司与分部互联和校园网综合项目
  • ¥15 主要进行描述泥浆在管路不同区段泥浆的密度不相同,泥浆的密度有高有低,此时管路的摩阻分布需要怎么计算,(标签-matlab)
  • ¥40 通过编制程序计算圆管内层流充分发展对流换热,参数如图5-4,以及公式5-16所示,要求用表5-6对程序计算准确性进行验证
  • ¥20 该学习哪个编程语言? AI会取代程序员吗?