编程 Javascript

JS实现鼠标框选效果完整实例

Posted in Javascript onJune 20, 2016

本文实例讲述了JS实现鼠标框选效果的方法。分享给大家供大家参考，具体如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标框选效果</title>
<style>
  *{
  padding:0;
  margin:0;
  }
  #bottom{
  position:absolute;
  bottom:0px;
  width:100%;
  height:40px;
  border:1px solid #000;
  background:#000;
  color:#fff;
  }
  .tempDiv{
  border:1px dashed blue;
  background:#5a72f8;
  position:absolute;
  width:0;
  height:0;
  filter:alpha(opacity:10);
  opacity:0.1
  }
</style>
<script type = "text/javascript">
  window.onload = function(){
  var stateBar = document.getElementById("bottom");
  document.onmousedown = function(e){
   var posx = e.clientX;
   var posy = e.clientY;
   var div = document.createElement("div");
   div.className = "tempDiv";
   div.style.left = e.clientX+"px";
   div.style.top = e.clientY+"px";
   document.body.appendChild(div);
   document.onmousemove = function(ev){
    div.style.left = Math.min(ev.clientX, posx) + "px";
    div.style.top = Math.min(ev.clientY, posy) + "px";
    div.style.width = Math.abs(posx - ev.clientX)+"px";
    div.style.height = Math.abs(posy - ev.clientY)+"px";
    stateBar.innerHTML = "MouseX: " + ev.clientX + "<br/>MouseY: " + ev.clientY;
    document.onmouseup = function(){
     div.parentNode.removeChild(div);
     document.onmousemove = null;
     document.onmouseup = null;
    }
   }
  }
}
</script>
</head>
<body>
   <div id = "bottom"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现鼠标框选效果完整实例

- Author -

cherry

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用Jquery实现多级下拉框无刷新的联动

Dec 22 Javascript

给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

Jun 09 Javascript

jquery的ajax跨域请求原理和示例

May 08 Javascript

关于原生js中bind函数的简单实现

Aug 10 Javascript

BootStrap Datepicker 插件修改为默认中文的实现方法

Feb 10 Javascript

CentOS环境中MySQL修改root密码方法

Jan 07 Javascript

Vue的轮播图组件实现方法

Mar 03 Javascript

基于js Canvas实现二次贝塞尔曲线

Dec 25 Javascript

Vue3.0结合bootstrap创建多页面应用

May 28 Javascript

JavaScript实现移动端带transition动画的轮播效果

Mar 24 Javascript

javascript设计模式 ? 职责链模式原理与用法实例分析

Apr 16 Javascript

微信小程序 button样式设置为图片的方法

Jun 19 Javascript

javascript事件冒泡简单示例

Jun 20 #Javascript

JS实现的打字机效果完整实例

Jun 20 #Javascript

jQuery实现的网格线绘制方法

Jun 20 #Javascript

jQuery实现右下角可缩放大小的层完整实例

Jun 20 #Javascript

需灵活掌握的Bootstrap预定义排版类你精通吗?

Jun 20 #Javascript

Javascript中的arguments对象

Jun 20 #Javascript

JavaScript中获取HTML元素值的三种方法

Jun 20 #Javascript