用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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   id="content" style="width:381px;">   <img src="/d/file/p/2019/11-21/97c879f319cf9a9a0567d83d519b05e3.jpg" ondrag="javascript:return false;" width="381" height="354">   <div   class="iwvjtn8m0"   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]