用javascript实现鼠标框选_javascript技巧

2020-11-27 来源：赴品旅游

起初是打算兼容 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="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/code.jpg" ondrag="javascript:return false;"> 
<script language="javascript"> 
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> 
 
 <img src="http://www.cftea.com/upload/721/code.jpg" ondrag="javascript:return false;" width="381" height="354"> 
 
 
<script language="javascript"> 
document.body.clientWidth || event.clientY>document.body.clientHeight) 
 { 
 return; 
 }

//鼠标左移还是右移 
 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需刷新才能执行]

显示全文

全部栏目

用javascript实现鼠标框选_javascript技巧