来源：ITPOW（www.itpow.com）
本文是在网页的某一部分实现框选效果，要在网页任意部分实现框选效果，请参见网页框选框(1)
预览时，框选效果是不是只在代码图片上有效？
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标框选框</title> </head> <body> <div> <a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a> <hr> </div> <div id="content" style="width:381px;"> <img src="http://www.itpow.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 全部选择 提示：你可先修改部分代码，再按运行]
创建于2005年 渝ICP备05010272号-1
电邮：cftea@126.com
