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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
javascript History对象原理解析
Feb 17 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP时间函数使用详解
2019/03/21 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Angular路由简单学习
2016/12/26 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Python实现学生成绩管理系统
2020/04/05 Python
python3实现随机数
2018/06/25 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python使用udp实现聊天器功能
2018/12/10 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Overload和Override的区别
2012/09/02 面试题
财务总监岗位职责
2014/03/07 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
乒乓球比赛通知
2015/04/27 职场文书
公司行政管理制度范本
2015/08/05 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server