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程序设计有所帮助。

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 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
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python入门篇之面向对象
2014/10/20 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
pandas如何处理缺失值
2019/07/31 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
浅谈Python 函数式编程
2020/06/20 Python
python复合条件下的字典排序
2020/12/18 Python
python解包概念及实例
2021/02/17 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
书法兴趣小组活动总结
2014/07/07 职场文书
贷款承诺书
2015/01/20 职场文书
检举信的写法
2019/04/10 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL