用javascript实现鼠标框选

起初是打算兼容 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">    </script>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

下面这个只在区域内有效

<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">    </script>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

用javascript实现鼠标框选

您可能感兴趣的文章: