js css （clip屬性，如何學習web開發

 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