用javascript实现鼠标框选

时间:2020-05-12 人气:0

起初是打算兼容 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 onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/26087.jpg" ondrag="javascript:return false;">  <div></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>  
 <img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/26088.jpg" ondrag="javascript:return false;" width="381" height="354">  
 <div></div>  
</div>  
<script language="javascript">  
<!--  
var content = document.getElementById("content");  
var box = document.getElementById("box");  
var boxWorking = false;  
var startPointX = 0;  
var startPointY = 0;

//鼠标左移还是右移  
   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;  
   }  
}

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

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

</html>

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

加载全部内容