图片点击后可实现放大 缩小 旋转

<div>
    <img alt="" onclick="showImg(this)" src="https://realcan-prescription-test.oss-cn-qingdao.aliyuncs.com/20201209/1607494454.jpg">
    <img alt="" onclick="showImg(this)" src="https://realcan-prescription-test.oss-cn-qingdao.aliyuncs.com/20201209/1607494460.jpg">
</div>
<script src="jquery-1.9.1.min.js"></script>
<!--放大图片start-->
<style>
    .mask-layer {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2020;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .mask-layer > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .mask-layer-black {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .85;
        position: absolute;
        top: 0;
        left: 0;
    }
    .mask-layer-container {
        width: 80%;
        height: 90%;
        background: #fff;
        position: absolute;
        margin: 0 auto;
        z-index: 2030;
        padding: 0 10px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .mask-layer-container-operate {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        border-bottom: solid 1px #ddd;
    }

    .mask-layer-imgbox {
        width: 100%;
        height: 90%;
        overflow: hidden;
        position: relative;
        margin-top: 10px;
    }

    .mask-layer-imgbox > p {
        position: absolute;
        cursor: move;
        transform-origin: center;
        width: 100%;
        height: 100%;
        padding: 0;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        cursor: move;
        left: 0;
        top: 0;
    }

    .mask-layer-imgboxp > p > img {
        display: inline-block;
        vertical-align: middle;
        cursor: move;
    }

    /*按钮样式*/
    .btn-default-styles {
        display: inline-block;
        padding: 5px 10px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        background: #8C85E6;
        color: #fff;
        border: solid 1px #8C85E6;
        border-radius: 4px;
    }
    .btn-default-styles:focus {
        outline: none;
    }
    .btn-default-styles:hover {
        background: #8078e3;
        animation: anniu 1s infinite;
    }
    .btn-default-styles:active {
        box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
    }
    .prescription-content .greencon .form-control{color:green;}
</style>
<script>
    function showImg(ele) {
        var img_path = $(ele).attr("src");
        //给body添加弹出层的html
        $("body").append("<div class=\"mask-layer\">" +
            "   <div class=\"mask-layer-black\"></div>" +
            "   <div class=\"mask-layer-container\">" +
            "       <div class=\"mask-layer-container-operate\">" +
            "           <button class=\"mask-out btn-default-styles\">放大</button>" +
            "           <button class=\"mask-in btn-default-styles\">缩小</button>" +
            "           <button class=\"mask-clockwise btn-default-styles\">顺旋转</button>" +
            "           <button class=\"mask-counterclockwise btn-default-styles\">逆旋转</button>" +
            "           <button class=\"mask-close btn-default-styles\">关闭</button>" +
            "       </div>" +
            "       <div class=\"mask-layer-imgbox auto-img-center\"></div>" +
            "   </div>" +
            "</div>"
        );
        $(".mask-layer-imgbox").append("<p><img src=\"\" alt=\"\"></p>");
        $(".mask-layer-imgbox img").prop("src", img_path); //给弹出框的Img赋值

        //图片居中显示
        var box_width = $(".auto-img-center").width(); //图片盒子宽度
        var box_height = $(".auto-img-center").height();//图片高度高度
        var initial_width = $(".auto-img-center img").width();//初始图片宽度
        var initial_height = $(".auto-img-center img").height();//初始图片高度
        if (initial_width > initial_height) {
            $(".auto-img-center img").css("width", box_width);
            var last_imgHeight = $(".auto-img-center img").height();
            $(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
        } else {
            $(".auto-img-center img").css("height", box_height);
            var last_imgWidth = $(".auto-img-center img").width();
            $(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
        }

        //图片拖拽
        var $div_img = $(".mask-layer-imgbox p");
        //绑定鼠标左键按住事件
        $div_img.bind("mousedown", function (event) {
            event.preventDefault && event.preventDefault(); //去掉图片拖动响应
            //获取需要拖动节点的坐标
            var offset_x = $(this)[0].offsetLeft;//x坐标
            var offset_y = $(this)[0].offsetTop;//y坐标
            //获取当前鼠标的坐标
            var mouse_x = event.pageX;
            var mouse_y = event.pageY;
            //绑定拖动事件
            //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
            $(".mask-layer-imgbox").bind("mousemove", function (ev) {
                // 计算鼠标移动了的位置
                var _x = ev.pageX - mouse_x;
                var _y = ev.pageY - mouse_y;
                //设置移动后的元素坐标
                var now_x = (offset_x + _x ) + "px";
                var now_y = (offset_y + _y ) + "px";
                //改变目标元素的位置
                $div_img.css({
                    top: now_y,
                    left: now_x
                });
            });
        });
        //当鼠标左键松开，接触事件绑定
        $(".mask-layer-imgbox").bind("mouseup", function () {
            $(this).unbind("mousemove");
        });
        //缩放
        var zoom_n = 1;
        $(".mask-out").click(function () {
            zoom_n += 0.1;
            $(".mask-layer-imgbox img").css({
                "transform": "scale(" + zoom_n + ")",
                "-moz-transform": "scale(" + zoom_n + ")",
                "-ms-transform": "scale(" + zoom_n + ")",
                "-o-transform": "scale(" + zoom_n + ")",
                "-webkit-": "scale(" + zoom_n + ")"
            });
        });
        $(".mask-in").click(function () {
            zoom_n -= 0.1;
            console.log(zoom_n)
            if (zoom_n <= 0.1) {
                zoom_n = 0.1;
                $(".mask-layer-imgbox img").css({
                    "transform":"scale(.1)",
                    "-moz-transform":"scale(.1)",
                    "-ms-transform":"scale(.1)",
                    "-o-transform":"scale(.1)",
                    "-webkit-transform":"scale(.1)"
                });
            } else {
                $(".mask-layer-imgbox img").css({
                    "transform": "scale(" + zoom_n + ")",
                    "-moz-transform": "scale(" + zoom_n + ")",
                    "-ms-transform": "scale(" + zoom_n + ")",
                    "-o-transform": "scale(" + zoom_n + ")",
                    "-webkit-transform": "scale(" + zoom_n + ")"
                });
            }
        });
        //旋转
        var spin_n = 0;
        $(".mask-clockwise").click(function () {
            spin_n += 15;
            $(".mask-layer-imgbox img").parent("p").css({
                "transform":"rotate("+ spin_n +"deg)",
                "-moz-transform":"rotate("+ spin_n +"deg)",
                "-ms-transform":"rotate("+ spin_n +"deg)",
                "-o-transform":"rotate("+ spin_n +"deg)",
                "-webkit-transform":"rotate("+ spin_n +"deg)"
            });
        });
        $(".mask-counterclockwise").click(function () {
            spin_n -= 15;
            $(".mask-layer-imgbox img").parent("p").css({
                "transform":"rotate("+ spin_n +"deg)",
                "-moz-transform":"rotate("+ spin_n +"deg)",
                "-ms-transform":"rotate("+ spin_n +"deg)",
                "-o-transform":"rotate("+ spin_n +"deg)",
                "-webkit-transform":"rotate("+ spin_n +"deg)"
            });
        });
        //关闭
        $(".mask-close").click(function () {
            $(".mask-layer").remove();
        });
        $(".mask-layer-black").click(function () {
            $(".mask-layer").remove();
        });
    }
</script>
<!--放大图片end-->

 原样式：

 

 点击图片后样式：可再放大 缩小 旋转