JS拖动鼠标画出方框实现鼠标选区的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下:

相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作。主要是依赖于JavaScript代码来实现。

运行效果如下图所示:

JS拖动鼠标画出方框实现鼠标选区的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>鼠标拖动画矩形</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
.div{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.retc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF}
</style>
</head>
<body> 
</body>
<script language = "javascript">
 var wId = "w";
 var index = 0;
 var startX = 0, startY = 0;
 var flag = false;
 var retcLeft = "0px", retcTop = "0px", retcHeight = "0px", retcWidth = "0px";
 document.onmousedown = function(e){
  flag = true;
  try{
   var evt = window.event || e;
   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
   startX = evt.clientX + scrollLeft;
   startY = evt.clientY + scrollTop;
   index++;
   var div = document.createElement("div");
   div.id = wId + index;
   div.className = "div";
   div.style.marginLeft = startX + "px";
   div.style.marginTop = startY + "px";
   document.body.appendChild(div);
  }catch(e){
  //alert(e);
  }
 }
 document.onmouseup = function(){
  try{
   document.body.removeChild($(wId + index));
   var div = document.createElement("div");
   div.className = "retc";
   div.style.marginLeft = retcLeft;
   div.style.marginTop = retcTop;
   div.style.width = retcWidth;
   div.style.height = retcHeight;
   document.body.appendChild(div);
  }catch(e){
   //alert(e);
  }
  flag = false;
 }
 document.onmousemove = function(e){
  if(flag){
   try{
   var evt = window.event || e;
   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
   retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX) + "px";
   retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + "px";
   retcHeight = Math.abs(startY - evt.clientY - scrollTop) + "px";
   retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + "px";
   $(wId + index).style.marginLeft = retcLeft;
   $(wId + index).style.marginTop = retcTop;
   $(wId + index).style.width = retcWidth;
   $(wId + index).style.height = retcHeight;
   }catch(e){
    //alert(e);
   } 
  }
 }
 var $ = function(id){
  return document.getElementById(id);
 }
</script>
</html>

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

Javascript 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
javascript实现的简单计时器
Jul 19 Javascript
js实现圆盘记速表
Aug 03 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
JS模拟键盘打字效果的方法
Aug 05 #Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
js绘制圆形和矩形的方法
Aug 05 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
Yii2中datetime类的使用
2016/12/17 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
JAVA和C++的区别
2013/10/06 面试题
农村党员一句话承诺
2014/05/30 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
爱心捐款活动总结
2015/05/09 职场文书
感恩教育观后感
2015/06/17 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL