用javascript实现鼠标框选

现在的位置: 首页 > 综合 > 正文

用javascript实现鼠标框选

2013年06月26日 ⁄ 综合 ⁄ 共 171字 ⁄ 字号小中大 ⁄ 评论关闭

起初是打算兼容 Netscape 和 FireFox 等浏览器的，但这些浏览器中不支持 style.pixelLeft，得使用 style.left 之类的（style.pixelLeft 为数字无单位，style.left 为文本有单位），实际使用中发现效果很不好，有延迟状，所以还是使用 style.pixelLeft，缺点是仅支持 IE 系列浏览器。

//将要移动鼠标，准备鼠标框选框，设置相关数据  
//仅鼠标左键或右键时有效  
//在客户区有效，在滚动条区域无效（滚动条区域属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>

【上篇】用指针访问类中private成员
【下篇】android 中ImageView的scaletype属性

作者: hardball

该日志由 hardball 于11年前发表在综合分类下，最后更新于 2013年06月26日.
转载请注明: 用javascript实现鼠标框选 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

用javascript实现鼠标框选

作者: hardball

书签

最新文章New

本站推荐

返回首页