<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-->
原样式：
点击图片后样式：可再放大 缩小 旋转
