用javascript实现鼠标框选

2019-11-21 02:04:29

字体：大中小

来源：转载

供稿：网友

起初是打算兼容 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="/d/file/p/2019/11-21/4f7197babc1bfb1ac9e2d262520acd05.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="/d/file/p/2019/11-21/97c879f319cf9a9a0567d83d519b05e3.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需刷新才能执行]

上一篇：搜集了几个不错的下拉菜单效果

下一篇：attachEvent的使用方法与传递参数[IE|firefox]