用javascript实现鼠标框选

时间：2020-11-24 17:14:54|栏目：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代码

下一篇：微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

本文标题：用javascript实现鼠标框选

本文地址：http://www.codeinn.net/misctech/25952.html

更多JavaScript代码

JavaScript代码

用javascript实现鼠标框选

阅读排行

推荐教程