<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #333333;
margin: 0;
padding: 0;
}
#div {
position: absolute;
top: 200px;
left: 200px;
width: 1024px;
height: 709px;
}
#preview {
position: absolute;
top: 200px;
left: 1250px;
width: 1024px;
height: 709px;
z-index: -999;
}
#img1, #img2, #img3 {
position: absolute;
top: 0;
left: 0;
}
#img1 {
opacity: 0.3;
}
#img2, #img3 {
clip: rect(0, 200px, 200px, 0);
}
#main {
position: relative;
width: 200px;
height: 200px;
border: 1px solid white;
cursor: move;
}
.left1, .left2, .left3, .center1, .center2, .right1, .right2, .right3 {
width: 7px;
height: 7px;
background: white;
position: absolute;
transform: translate(-50%, -50%);
}
.left1 {
top: 0;left: 0;cursor: nw-resize;
}
.left2 {
top: 50%;left: 0;cursor: w-resize;
}
.left3 {
top: 100%;left: 0;cursor: sw-resize;
}
.center1 {
top: 0;left: 50%;cursor: n-resize;
}
.center2 {
top: 100%;left: 50%;cursor: s-resize;
}
.right1 {
top: 0;left: 100%;cursor: sw-resize;
}
.right2 {
top: 50%;left: 100%;cursor: e-resize;
}
.right3 {
top: 100%;left: 100%;cursor: se-resize;
}
</style>
<script>
window.onload = function () {
// 设置图片不会被选中
document.onselectstart = new Function('event.returnValue = false')
var isMoveing = false // 鼠标是否被按下
var mouseDownArea = '' // 被点击区域
let left1 = document.querySelector('.left1')
let left2 = document.querySelector('.left2')
let left3 = document.querySelector('.left3')
let center1 = document.querySelector('.center1')
let center2 = document.querySelector('.center2')
let right1 = document.querySelector('.right1')
let right2 = document.querySelector('.right2')
let right3 = document.querySelector('.right3')
var Div = document.querySelector('#div')
var mainDiv = document.querySelector('#main')
var img2 = document.querySelector('#img2')
var img3 = document.querySelector('#img3')
var preview = document.querySelector('#preview')
var X = 0;
var Y = 0;
var addWidth // 鼠标移动后 选取框增加的宽度
var addHeight // 鼠标移动后 选取框增加的高度
var widthBefore // 选取框原来的宽度
var heightBefore // 选取框原来的高度
// left1 鼠标按下事件
left1.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'left1'
console.log('点进来了')
}
// left2 鼠标按下事件
left2.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'left2'
}
// left3 鼠标按下事件
left3.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'left3'
}
// center1 鼠标按下事件
center1.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'center1'
}
// center2 鼠标按下事件
center2.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'center2'
}
// right1 鼠标按下事件
right1.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'right1'
}
// right2 鼠标按下事件
right2.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'right2'
}
// right3 鼠标按下事件
right3.onmousedown = function (e) {
e.stopPropagation()
isMoveing = true
mouseDownArea = 'right3'
}
// 鼠标在被选区域内拖拽事件
mainDiv.onmousedown = function (e) {
isMoveing = true
X = e.pageX - mainDiv.offsetLeft - Div.offsetLeft
Y = e.pageY - mainDiv.offsetTop - Div.offsetTop
mouseDownArea = 'main'
}
// 鼠标移动事件
window.onmousemove = function (e) {
if (isMoveing) {
switch (mouseDownArea) {
case "left1":
leftMove(e)
upMove(e)
break
case "left2":
leftMove(e)
break
case "left3":
leftMove(e)
downMove(e)
break
case "center1":
upMove(e)
break
case "center2":
downMove(e)
break
case "right1":
rightMove(e)
upMove(e)
break
case "right2":
rightMove(e)
break
case "right3":
rightMove(e)
downMove(e)
break
case "main":
move(e)
break
default:
}
setMainDivLight(mainDiv, img2)
previewSelectArea()
}
}
// 鼠标松开事件
window.onmouseup = function (e) {
isMoveing = false
}
// 设置选取区域高亮
function setMainDivLight (node, img) {
let top = node.offsetTop
let right = node.offsetLeft + node.clientWidth
let bottom = node.offsetTop + node.clientHeight
let left = node.offsetLeft
img.style.clip = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px)'
}
// 预览图片
function previewSelectArea () {
let top = mainDiv.offsetTop
let right = mainDiv.offsetLeft + mainDiv.clientWidth
let bottom = mainDiv.offsetTop + mainDiv.clientHeight
let left = mainDiv.offsetLeft
img3.style.clip = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px)'
img3.style.top = -mainDiv.offsetTop + 'px'
img3.style.left = -mainDiv.offsetLeft + 'px'
}
// center1拖拽点事件
function upMove (e) {
let y = e.pageY
if (e.pageY <= Div.offsetTop) {
y = Div.offsetTop
}
if (e.pageY >= mainDiv.offsetTop + Div.offsetTop + mainDiv.clientHeight) {
y = mainDiv.offsetTop + Div.offsetTop + mainDiv.clientHeight
}
addHeight = mainDiv.offsetTop + Div.offsetTop - y
heightBefore = mainDiv.clientHeight
mainDiv.style.height = heightBefore + addHeight + 'px'
mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px'
if (mainDiv.offsetTop - addHeight <= 0) {
mainDiv.style.top = '0px'
}
}
// right2拖拽点
function rightMove (e) {
let x = e.pageX
if (e.pageX >= Div.offsetLeft + Div.clientWidth) {
x = Div.offsetLeft + Div.clientWidth
}
if (e.pageX <= mainDiv.offsetLeft + Div.offsetLeft) {
x = mainDiv.offsetLeft + Div.offsetLeft
}
addWidth = x - (mainDiv.offsetLeft + Div.offsetLeft + mainDiv.clientWidth)
WidthBefore = mainDiv.clientWidth
mainDiv.style.width = WidthBefore + addWidth + 'px'
}
// center2拖拽点
function downMove (e) {
let y = e.pageY
if (e.pageY >= Div.offsetTop + Div.clientHeight) {
y = Div.offsetTop + Div.clientHeight
}
if (e.pageY <= mainDiv.offsetTop + Div.offsetTop) {
y = mainDiv.offsetTop + Div.offsetTop
}
addHeight = y - (mainDiv.offsetTop + Div.offsetTop + mainDiv.clientHeight)
heightBefore = mainDiv.clientHeight
mainDiv.style.height = heightBefore + addHeight + 'px'
}
// left2拖拽点事件
function leftMove (e) {
let x = e.pageX
if (e.pageX <= Div.offsetLeft) {
x = Div.offsetLeft
}
if (e.pageX >= mainDiv.offsetLeft + Div.offsetLeft + mainDiv.clientWidth) {
x = mainDiv.offsetLeft + Div.offsetLeft + mainDiv.clientWidth
}
addWidth = mainDiv.offsetLeft + Div.offsetLeft - x
WidthBefore = mainDiv.clientWidth
mainDiv.style.width = WidthBefore + addWidth + 'px'
mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px'
if (mainDiv.offsetLeft - addWidth <= 0) {
mainDiv.style.left = '0px'
}
}
// 选取框拖拽
function move (e) {
mainDiv.style.left = Math.max(0, Math.min(e.pageX - X - Div.offsetLeft, Div.clientWidth - mainDiv.clientWidth)) + 'px'
mainDiv.style.top = Math.max(0, Math.min(e.pageY - Y - Div.offsetLeft, Div.clientHeight - mainDiv.clientHeight)) + 'px'
}
}
</script>
</head>
<body>
<div id="div">
<img src="center.png" id="img1"/>
<img src="center.png" id="img2"/>
<div id="main">
<div class="left1"></div>
<div class="left2"></div>
<div class="left3"></div>
<div class="center1"></div>
<div class="center2"></div>
<div class="right1"></div>
<div class="right2"></div>
<div class="right3"></div>
</div>
</div>
<div id="preview">
<img src="center.png" id="img3"/>
</div>
</body>
</html>
将代码保存成HTML文件，
center.png可随便找张图片命名为center.png，放在保存的html文件同级目录下，
用浏览器打开****.html文件即可。