本文实例讲述了js拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下：
相当实用的一个js技巧，拖动鼠标可画出一个方框，可作为一个选区的功能，可以用来画流程图，设计草图什么的，也可以作为上传头像时裁切选择图片，在头像裁切中使用广泛，鼠标在图片上拖动拉出一个方框，这个方框就代表着选区的功能，目前网页上已流行的一种操作。主要是依赖于javascript代码来实现。
运行效果如下图所示：
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>鼠标拖动画矩形</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
.p{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.retc{position:absolute; border:1px solid #cccccc; overflow:hidden; background:#efefef}
</style>
</head>
<body>
</body>
<script language = "javascript">
var wid = "w";
var index = 0;
var startx = 0, starty = 0;
var flag = false;
var retcleft = "0px", retctop = "0px", retcheight = "0px", retcwidth = "0px";
document.onmousedown = function(e){
flag = true;
try{
var evt = window.event || e;
var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;
var scrollleft = document.body.scrollleft || document.documentelement.scrollleft;
startx = evt.clientx + scrollleft;
starty = evt.clienty + scrolltop;
index++;
var p = document.createelement("p");
p.id = wid + index;
p.classname = "p";
p.style.marginleft = startx + "px";
p.style.margintop = starty + "px";
document.body.appendchild(p);
}catch(e){
//alert(e);
}
}
document.onmouseup = function(){
try{
document.body.removechild($(wid + index));
var p = document.createelement("p");
p.classname = "retc";
p.style.marginleft = retcleft;
p.style.margintop = retctop;
p.style.width = retcwidth;
p.style.height = retcheight;
document.body.appendchild(p);
}catch(e){
//alert(e);
}
flag = false;
}
document.onmousemove = function(e){
if(flag){
try{
var evt = window.event || e;
var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;
var scrollleft = document.body.scrollleft || document.documentelement.scrollleft;
retcleft = (startx - evt.clientx - scrollleft > 0 ? evt.clientx + scrollleft : startx) + "px";
retctop = (starty - evt.clienty - scrolltop > 0 ? evt.clienty + scrolltop : starty) + "px";
retcheight = math.abs(starty - evt.clienty - scrolltop) + "px";
retcwidth = math.abs(startx - evt.clientx - scrollleft) + "px";
$(wid + index).style.marginleft = retcleft;
$(wid + index).style.margintop = retctop;
$(wid + index).style.width = retcwidth;
$(wid + index).style.height = retcheight;
}catch(e){
//alert(e);
}
}
}
var $ = function(id){
return document.getelementbyid(id);
}
</script>
</html>
以上就是javascript实现点击鼠标左键进行区域选择的功能实现的详细内容。