<!DOCTYPE HTML> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片剪切</title> </head> <body> <div id="box" style="position: absolute;top:0px;left:0px;"> <img style="position:absolute;top:0px;left:0px;opacity: 0.3;" src="" id="img1"/> <img style="position:absolute;top:0px;left:0px;clip: rect(50px, 250px, 250px, 50px);" src="" id="img2"/> <!--第三层需用绝对定位浮在上面--> <div id="dragDiv" style="position: absolute; 200px;height: 200px;border: 1px solid #fff;top:50px;left:50px;"> <div class="Divmin up-left"></div> <div class="Divmin up"></div> <div class="Divmin up-right"></div> <div class="Divmin right"></div> <div class="Divmin right-down"></div> <div class="Divmin down"></div> <div class="Divmin left-down"></div> <div class="Divmin left"></div> <div class="Divmin-btn" style="right: 68px;background-color: #2d87f5;">确定</div> <div class="Divmin-btn" style="right: 0px;background-color: #f5a52d;">取消</div> </div> </div> </body> </html> <style> body { background: #333; } .Divmin-btn { bottom: -40px; width: 60px; height: 30px; line-height: 30px; color: white; font-size: 12px; text-align: center; display: inline-block; position: absolute; border-radius: 3px 3px 3px 3px; } .Divmin-btn:hover { background-color: rgba(60, 103, 222, 0.6); color: #efeeee; } .Divmin-btn:active { background-color: rgba(69, 94, 167, 0.6); color: #efeeee; } .Divmin { position: absolute; width: 8px; height: 8px; background: #fff; } .up-left { margin-top: -4px; margin-left: -4px; cursor: nw-resize; } .up { left: 50%; /*父元素盒子dragDiv宽度的一半，注意要有绝对定位*/ margin-left: -4px; top: -4px; cursor: n-resize; } .up-right { top: -4px; right: -4px; cursor: ne-resize; } .right { top: 50%; margin-top: -4px; right: -4px; cursor: e-resize; } .right-down { right: -4px; bottom: -4px; cursor: se-resize; } .down { bottom: -4px; left: 50%; margin-left: -4px; cursor: s-resize; } .left-down { left: -4px; bottom: -4px; cursor: sw-resize; } .left { left: -4px; top: 50%; margin-top: -4px; cursor: w-resize; } </style> <script type="text/javascript"> //禁止图片被选中 document.onselectstart = new Function('event.returnValue = false;'); //获取id的函数 function $(id) { debugger if (id.indexOf(".") == 0) { var className = id.substring(1, id.length); var els = document.getElementsByClassName(className); return els[0]; } return document.getElementById(id); } //获取元素相对于屏幕左边及上边的距离，利用offsetLeft function getPosition(el) { var left = el.offsetLeft; var top = el.offsetTop; var parent = el.offsetParent; while (parent != null) { left += parent.offsetLeft; top += parent.offsetTop; parent = parent.offsetParent; } return {"left": left, "top": top}; } var dragDiv = $('dragDiv'); var rightDiv = $('.right'); var isDraging = false; var contact = "";//表示被按下的触点 //鼠标按下时 $('.right').onmousedown = function () { isDraging = true; contact = "right"; } $('.left').onmousedown = function () { isDraging = true; contact = "left"; } $('.down').onmousedown = function () { isDraging = true; contact = "down"; } $('.up').onmousedown = function () { isDraging = true; contact = "up"; } $('.up-right').onmousedown = function () { isDraging = true; contact = "up-right"; } $('.right-down').onmousedown = function () { isDraging = true; contact = "down-right"; } $('.up-left').onmousedown = function () { isDraging = true; contact = "up-left"; } $('.left-down').onmousedown = function () { isDraging = true; contact = "down-left"; } //鼠标松开时 window.onmouseup = function () { isDraging = false; } //鼠标移动时 window.onmousemove = function (e) { var e = e || window.event; if (isDraging == true) { switch (contact) { case "up" : upMove(e); break; case "right" : rightMove(e); break; case "down" : downMove(e); break; case "left" : leftMove(e); break; case "up-right" : upMove(e); rightMove(e); break; case "down-right" : downMove(e); rightMove(e); break; case "down-left" : downMove(e); leftMove(e); break; case "up-left" : upMove(e); leftMove(e); break; } } } //up移动 function upMove(e) { var y = e.clientY;//鼠标位置的纵坐标 var heightBefore = dragDiv.offsetHeight - 2;//选取框变化前的高度 var addHeight = getPosition(dragDiv).top - y;//增加的高度 dragDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度 dragDiv.style.top = dragDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大 setChoice(); } //right移动 function rightMove(e) { var x = e.clientX;//鼠标位置的横坐标 var widthBefore = dragDiv.offsetWidth - 2;//选取框变化前的宽度 //var widthBefore = dragDiv.clientWidth; var addWidth = x - getPosition(dragDiv).left - widthBefore;//鼠标移动后选取框增加的宽度 dragDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度 setChoice(); } //down移动 function downMove(e) { var heightBefore = dragDiv.offsetHeight - 2; var addHeight = e.clientY - getPosition(dragDiv).top - dragDiv.offsetHeight; dragDiv.style.height = heightBefore + addHeight + 'px'; setChoice(); } //left移动 function leftMove(e) { var widthBefore = dragDiv.offsetWidth - 2; var addWidth = getPosition(dragDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标 dragDiv.style.width = widthBefore + addWidth + 'px'; dragDiv.style.left = dragDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度 setChoice(); } //设置选取框图片区域明亮显示 function setChoice() { var top = dragDiv.offsetTop; var right = dragDiv.offsetLeft + dragDiv.offsetWidth; var bottom = dragDiv.offsetTop + dragDiv.offsetHeight; var left = dragDiv.offsetLeft; $('img2').style.clip = "rect(" + top + "px," + right + "px," + bottom + "px," + left + "px)"; } </script>