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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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
对盗链说再见...
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
js实现微博发布小功能
2017/01/12 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python读大数据txt
2016/03/28 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python super用法及原理详解
2020/01/20 Python
业务员的岗位职责
2014/03/15 职场文书
法院信息化建设方案
2014/05/21 职场文书
党员志愿者活动方案
2014/08/28 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书