图片
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
border:1px solid black;
width: 0px;
height: 0px;
position: absolute; z-index:-;
}
div{
opacity:;
border:1px solid black;
width:800px;
height:500px; }
</style>
<script type="text/javascript">
window.onload = function(e) {
e = e || window.event;
// startX, startY 为鼠标点击时初始坐标
var startX, startY;
// 鼠标按下
document.onmousedown = function(e) {
startX = e.pageX;
startY = e.pageY;
// 在页面创建 box
var active_box = document.createElement("div");
active_box.id = "active_box";
active_box.className = "box";
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
document.body.appendChild(active_box);
active_box = null;
};
// 鼠标移动
document.onmousemove = function(e) {
// 更新 box 尺寸
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box");
if(e.pageX>startX){
if(e.pageY>startY){
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else if(e.pageY==startY){
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else{
active_box.style.top = e.pageY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}
}else if(e.pageX==startX){
if(e.pageY>startY){
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else if(e.pageY==startY){
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else{
active_box.style.top = e.pageY + 'px';
active_box.style.left = startX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}
}else{
if(e.pageY>startY){
active_box.style.top = startY + 'px';
active_box.style.left = e.pageX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else if(e.pageY==startY){
active_box.style.top = e.pageY + 'px';
active_box.style.left = e.pageX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}else{
active_box.style.top = e.pageY + 'px';
active_box.style.left = e.pageX + 'px';
ab.style.width = Math.abs(e.pageX - startX) + 'px';
ab.style.height = Math.abs(e.pageY - startY) + 'px';
}
} }
};
// 鼠标抬起
document.onmouseup = function(e) {
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box");
ab.removeAttribute("id");
// 如果长宽均小于 3px，移除 box
document.body.removeChild(ab);
}
};
};
</script>
</head>
<body>
<div></div>
<p>点击鼠标左键并拖动绘制矩形</p>
</body>
</html>