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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
使用js实现数据格式化
Dec 03 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
原生js实现表格循环滚动
Nov 24 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+mysql写的留言本
2006/10/09 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python利用拉链法实现字典方法示例
2017/03/25 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
如何在python中判断变量的类型
2020/07/29 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Python try except finally资源回收的实现
2021/01/25 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
PHP面试题大全
2015/10/16 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
员工年终演讲稿
2014/01/03 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
元宵晚会主持词
2014/03/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
农民工工资承诺书大全
2015/05/04 职场文书