效果图

image.png

function imgFD(eleImg) {
                var html=`<div id="move_part" class="big_img_box">
                            <span class="close">×</span>
                            <img draggable="false" src="" alt="">
                        </div>`
                        $("body").append(html);
                        $(".big_img_box").css({position: "fixed",left: "45%",top: "200px",right: 0,width: 0,height: 0,background: "#fff",padding: "5px",border: "1px solid #d6d6d6",display:"none","z-index": 1000});
                        $(".big_img_box img").css({width: "100%",height: "100%"});
                        $(".close").css({position: "absolute",right: "10px",top: "10px",color: "#fff",background: "#6c8fff","font-size": "12px",display:"inline-block","justify-content":"center","align-items": "center",cursor: "pointer",width: "25px",height: "25px","border-radius": "50%","line-height":"25px" ,"text-align":"center" });     
                var timer = null;
                eleImg.on("click", function(e) {
                    clearInterval(timer);
                    var target = e.srcElement ? e.srcElement : e.target;
                    //      var src=e.srcElement.src;
                    var src = target.src;
                    // if(src.slice(-6).indexOf('.') == -1) {
                    //  return;
                    // }

                    $('.big_img_box img')[0].src = src;
                    var height = parseInt(target.naturalHeight / 1.2) / 20;
                    var width = parseInt(target.naturalWidth / 1.2) / 20;
                    var h0 = 0;
                    var y0 = 0;
                    var hh0 = 0;
                    var yy0 = 0;
                    timer = setInterval(function() {
                        if(parseInt(h0) == parseInt(target.naturalHeight / 1.2) || parseInt(y0) == parseInt(target.naturalWidth / 1.2)) {
                            clearInterval(timer);
                        }
                        h0 += height;
                        y0 += width;
                        if(y0 > 800) {
                            yy0 = 800;
                            hh0 = h0 * 800 / y0;
                            if(hh0 > 640) {
                                hh0 = 640;
                                yy0 = 800 * 640 / (h0 * 800 / y0);
                            }
                        } else {
                            yy0 = y0;
                            hh0 = h0;
                            if(hh0 > 640) {
                                hh0 = 640;
                                yy0 = y0 * 640 / h0;
                            }
                        }

                        $('.big_img_box').css({
                            height: hh0 + 'px',
                            width: yy0 + 'px'
                        })
                        $('.big_img_box').show();
                    }, 20);

                })

                $('.close').click(function(e) {
                    clearInterval(timer);
                    $('.big_img_box').hide();
                    e.stopPropagation();
                    return false;
                })

                var div1 = document.getElementById("move_part");
                div1.onmousedown = function(ev) {

                    var oevent = ev || event;
                    var distanceX = oevent.clientX - div1.offsetLeft;
                    var distanceY = oevent.clientY - div1.offsetTop;
                    // console.log(distanceX, distanceY);
                    document.onmousemove = function(ev) {
                        var oevent = ev || event;
                        div1.style.left = oevent.clientX - distanceX + 'px';
                        div1.style.top = oevent.clientY - distanceY + 'px';
                    };
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }

            }