图片
code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { border:1px solid black; 0px; height: 0px; position: absolute; z-index:-1; } div{ opacity:1; border:1px solid black; 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>