用javascript实现鼠标框选


答案：起初是打算兼容 Netscape 和 FireFox 等浏览器的，但这些浏览器中不支持 style.pixelLeft，得使用 style.left 之类的（style.pixelLeft 为数字无单位，style.left 为文本有单位），实际使用中发现效果很不好，有延迟状，所以还是使用 style.pixelLeft，缺点是仅支持 IE 系列浏览器。 
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>鼠标框选框</title>  
</head>  
<body> 

<img src="/upload/20121013/code.jpg" ondrag="javascript:return false;">  <div id="box" style="position:absolute;display:none;width:0px;height:0px;border:1px solid #0000FF;background-color:#99CCFF;font-size:1px;filter:alpha(opacity=50);"></div>  
<script language="javascript">  
<!--  
var box = document.getElementById("box");  
var boxWorking = false;  
var startPointX = 0;  
var startPointY = 0;  

//将要移动鼠标，准备鼠标框选框，设置相关数据  
//仅鼠标左键或右键时有效  
//在客户区有效，在滚动条区域无效（滚动条区域属document.body，但不属于document.body的客户区）  
function StartBox()  
{  
   //鼠标键判断  
   if (event.button!=1 && event.button!=2)  
   {  
       return;  
   }  
     
   //鼠标位置判断  
   if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight)  
   {  
       return;  
   }  

   startPointX = document.body.scrollLeft + event.clientX;  
   startPointY = document.body.scrollTop + event.clientY;  
     
   box.style.pixelLeft = startPointX;  
   box.style.pixelTop = startPointY;  
   box.style.pixelWidth = 0;  
   box.style.pixelHeight = 0;  
   box.style.display = "block";  
   boxWorking = true;  
}  

//改变鼠标框选框大小  
function ResizeBox()  
{  
   //必须要先按下鼠标左键或右键  
   if (!boxWorking)  
   {  
           return;  
   }  
     
   var endPointX = document.body.scrollLeft + event.clientX;  
   var endPointY = document.body.scrollTop + event.clientY;  
     
   //鼠标左移还是右移  
   if (endPointX >= startPointX )  
   {  
       box.style.pixelLeft = startPointX;  
       box.style.pixelWidth = endPointX - startPointX;  
   }  
   else  
   {  
       box.style.pixelLeft = endPointX;  
       box.style.pixelWidth = startPointX - endPointX;  
   }  
     
   //鼠标上移还是下移  
   if (endPointY >= startPointY )  
   {  
       box.style.pixelTop = startPointY;  
       box.style.pixelHeight = endPointY - startPointY;  
   }  
   else  
   {  
       box.style.pixelTop = endPointY;  
       box.style.pixelHeight = startPointY - endPointY;  
   }  
}  

//鼠标移动结束，隐藏鼠标框选框，设置相关数据  
//仅鼠标左键或右键时有效  
function EndBox()  
{  
   //鼠标键判断  
   if (event.button!=1 && event.button!=2)  
   {  
       return;  
   }  

   box.style.display = "none";  
   boxWorking = false;  
}  

document.body.onmousedown= StartBox;  
document.body.onmousemove = ResizeBox;  
document.body.onmouseup = EndBox;  
//-->  
</script>  
</body>  

</html>  

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面这个只在区域内有效 
<html>  

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>鼠标框选框</title>  
</head>  

<body>  
<div id="content" style="width:381px;">  
 <img src="/upload/20121013/code.jpg" ondrag="javascript:return false;" width="381" height="354">  
 <div id="box" style="position:absolute;display:none;width:0px;height:0px;border:1px solid #0000FF;background-color:#99CCFF;font-size:1px;filter:alpha(opacity=50);"></div>  
</div>  
<script language="javascript">  
<!--  
var content = document.getElementById("content");  
var box = document.getElementById("box");  
var boxWorking = false;  
var startPointX = 0;  
var startPointY = 0;  

//将要移动鼠标，准备鼠标框选框，设置相关数据  
//仅鼠标左键或右键时有效  
//在客户区有效，在滚动条区域无效（滚动条区域属document.body，但不属于document.body的客户区）  
function StartBox()  
{  
   //鼠标键判断  
   if (event.button!=1 && event.button!=2)  
   {  
       return;  
   }  
     
   //鼠标位置判断  
   if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight)  
   {  
       return;  
   }  

   startPointX = document.body.scrollLeft + event.clientX;  
   startPointY = document.body.scrollTop + event.clientY;  
     
   box.style.pixelLeft = startPointX;  
   box.style.pixelTop = startPointY;  
   box.style.pixelWidth = 0;  
   box.style.pixelHeight = 0;  
   box.style.display = "block";  
   boxWorking = true;  
}  

//改变鼠标框选框大小  
function ResizeBox()  
{  
   //必须要先按下鼠标左键或右键  
   if (!boxWorking)  
   {  
           return;  
   }  
     
   var endPointX = document.body.scrollLeft + event.clientX;  
   var endPointY = document.body.scrollTop + event.clientY;  

   //鼠标左移还是右移  
   if (endPointX >= startPointX )  
   {  
       endPointX = (endPointX<=(content.offsetLeft+content.offsetWidth))?endPointX:(content.offsetLeft + content.offsetWidth);  
       box.style.pixelLeft = startPointX;  
       box.style.pixelWidth = endPointX - startPointX;  
   }  
   else  
   {  
       endPointX = (endPointX>=content.offsetLeft)?endPointX:content.offsetLeft;  
       box.style.pixelLeft = endPointX;  
       box.style.pixelWidth = startPointX - endPointX;  
   }  
     
   //鼠标上移还是下移  
   if (endPointY >= startPointY )  
   {  
       endPointY = (endPointY<=(content.offsetTop+content.offsetHeight))?endPointY:(content.offsetTop + content.offsetHeight);  
       box.style.pixelTop = startPointY;  
       box.style.pixelHeight = endPointY - startPointY;  
   }  
   else  
   {  
       endPointY = (endPointY>=content.offsetTop)?endPointY:content.offsetTop;  
       box.style.pixelTop = endPointY;  
       box.style.pixelHeight = startPointY - endPointY;  
   }  
}  

//鼠标移动结束，隐藏鼠标框选框，设置相关数据  
//仅鼠标左键或右键时有效  
function EndBox()  
{  
   //鼠标键判断  
   if (event.button!=1 && event.button!=2)  
   {  
       return;  
   }  

   box.style.display = "none";  
   boxWorking = false;  
}  

content.onmousedown= StartBox;  
document.body.onmousemove = ResizeBox;  
document.body.onmouseup = EndBox;  
//-->  
</script>  
</body>  

</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：js实现的的文字自动''到google search框
下一个：一个js实现的所谓的滑动门
更多图片编程知识: