js实现图片拖拽与缩放，源码

下方的代码包括html,css,javascript。可直接复制到本地文件测试。如果引用的图片无法访问，请替换图片连接。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片拖拽与缩放</title>
    <style>
        #content{
        }
    </style>
</head>
<body>
<div id="content">
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    <img class="imgs" src="https://img0.baidu.com/it/u=580921286,1214064928&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"><br>                       <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the <br>efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    <img class="imgs" src="https://img1.baidu.com/it/u=403163518,2135282784&fm=253&fmt=auto&app=138&f=JPEG?w=913&h=393"><br>                       <br>
        China's latest emphasis on nurturing new quality productive forces as well as<br> the efficient policies introduced during the annual sessi<br>ons of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                   <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>
</div>
</body>
<!-- <script src="./daz.js"></script> -->
<script>
function createCurtain(){
    const curtain = document.createElement('div');
    curtain.style.top = "0px";
    curtain.style.left = "0px";
    curtain.style.position = "fixed";
    curtain.style.backgroundColor = "rgba(255, 255, 255, 0)";
    curtain.style.width = "100%";
    curtain.style.height = "100%";
    curtain.style.display = "none";
    curtain.style.transition = "background-color 0.4s ease";
    // 获取 <body> 元素
    const body = document.body;
    // 获取第一个子元素
    const firstChild = body.firstChild;
    // 在第一个子元素之前插入新的 <div> 元素
    body.insertBefore(curtain, firstChild);
    return curtain;
}
function dragAndZoom(content){
    var topOld = 0;
    var leftOld = 0;
    var width = 0;
    var height = 0;
    let curtain = createCurtain();
    let imgs = content.getElementsByTagName("img");
    for(var i=0;i<imgs.length;i++){
        imgs[i].onclick=function () {
            curtain.style.display="block";
            curtain.style.transition="background-color 0.4s ease";
            curtain.style.backgroundColor="rgba(0, 0, 0,0.9)";
            width = this.offsetWidth;
            height = this.offsetHeight;
            const myimage = document.createElement('img');
            myimage.height = this.offsetHeight;
            myimage.style.position = "fixed";
            myimage.style.zIndex = "2147483648";
            myimage.style.cursor = "grab";
            myimage.style.transitionProperty = "top, left, transform";
            myimage.style.transitionDuration = "0.4s";
            myimage.style.transform = "translate(0%,0%)";
            myimage.style.transitionTimingFunction = "ease-in-out;"
            myimage.setAttribute('draggable', 'true');
            myimage.id = "image";
            myimage.setAttribute("src",this.getAttribute("src"));
            document.body.style.overflow='hidden';
            curtain.appendChild(myimage);
            const rect = this.getBoundingClientRect();
            const topOffset = rect.top;
            const leftOffset = rect.left;
            topOld = topOffset;
            leftOld = leftOffset;
            myimage.style.top=topOffset+"px";
            myimage.style.left=leftOffset+"px";    
            zoom(myimage)
            imgMove(myimage);
            myimage.style.top = "50%";
            myimage.style.left = "50%";
            myimage.style.transform = "translate(-50%,-50%)";
        }    
    }
    curtain.onclick=function () {
        let image = document.getElementById("image");
        image.style.transitionProperty = "top, left, transform, height";
        image.style.transitionDuration = "0.4s";
        image.style.transitionTimingFunction = "ease-in-out;"
        image.height = height;
        image.style.transform = "translate(0%,0%)";
        image.style.top = topOld+"px";
        image.style.left = leftOld+"px";
        curtain.style.backgroundColor="rgba(255, 255, 255,0)";
        image.addEventListener('transitionend', ()=>{
            this.style.display="none";
            document.body.style.overflow=''
            curtain.innerHTML = '';
        })
    }
}
function imgMove(img) {
    const i = window.getComputedStyle(img);
    i.getPropertyValue('top');
    let tv = 0;
    let lv = 0;
    // 图片坐标信息
    let imgTop = 0;
    let imgLeft = 0;
    // 鼠标坐标信息
    let mx = 0;
    let my = 0;
    // 图片拖动开始前
    img.ondragstart = e => {
        img.style.transitionProperty  = "";
        img.style.transitionDuration  = "";
        img.style.transitionTimingFunction = ""
        // 初始化鼠标坐标信息
        mx = e.screenX;
        my = e.screenY;
        if (img.style.top === "50%") {
            // 初始化 图片坐标信息
            const imageStyles = window.getComputedStyle(img);
            tv = parseFloat(imageStyles.getPropertyValue('top'));
            lv = parseFloat(imageStyles.getPropertyValue('left'));
        }
    }
    // 图片拖动中
    img.ondrag = e => {
        if (e.screenY == 0 && e.screenX == 0) {
            return
        }
        imgTop = imgTop + e.screenY - my;
        imgLeft = imgLeft + e.screenX - mx;
        mx = e.screenX;
        my = e.screenY;
        img.style.top = imgTop+tv + "px";
        img.style.left = imgLeft+lv + "px";
    }
}
function zoom(myimage){
    var scrollFunc = function (e) {
        e = e || window.event;
        let height = myimage.height;
        if (e.wheelDelta) {             //IE Chrome Opera Safari
            if (e.wheelDelta > 0) {
                myimage.height = height + 20;
                e.stopPropagation();    //终止事件的进一步传播
            }
            if (e.wheelDelta < 0) {
                if(height < 100){
                    return;
                }
                myimage.height = height - 20;
                e.stopPropagation();
            }
        } else if (e.detail) {            //Firefox
            if (e.detail < 0) {
                myimage.height = height + 20;
                e.stopPropagation();    //终止事件的进一步传播
            }
            if (e.detail > 0) {
                if(height < 100){
                    return;
                }
                myimage.height = height - 20;
                e.stopPropagation();
            }
        }
    }
    if (myimage.addEventListener) {
        //addEventListener适用于版本较新的IE浏览器 ，如IE9以及火狐浏览器，
        myimage.addEventListener("mousewheel", scrollFunc, false);
        // Firefox浏览器使用的滚轮事件是 DOMMouseScroll
        myimage.addEventListener("DOMMouseScroll", scrollFunc, false);
    } else {
        myimage.attachEvent("onmousewheel", scrollFunc);
    }
}    
</script>
<script>
    window.onload = function(){
        let content = document.getElementById("content");
        dragAndZoom(content);
    }
</script>
</html>