页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

用javascript实现鼠标框选

发布：dxy 字体：[增加减小] 类型：转载

起初是打算兼容 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="http://www.cftea.com/upload/720/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 全选提示:你可先修改部分代码,再按运行]

下面这个只在区域内有效

点击运行可以看到效果:

<html>

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

<body>  
<div id="content" style="width:381px;">  
 <img src="http://www.cftea.com/upload/721/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 全选提示:你可先修改部分代码,再按运行]

Tags：用javascript实现鼠标框选

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：attachEvent的使用方法与传递参数[IE|firefox]
下一篇文章：执行iframe中的javascript方法

·在百度中搜索关于“用javascript实现鼠标框选相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

用javascript实现鼠标框选

文章评论

同类文章

最近更新

热点排行

用javascript实现鼠标框选

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行