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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
DOM 基本方法
Jul 18 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
js实现随机点名
2021/01/19 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python实现flappy bird小游戏
2018/12/24 Python
python实现感知器算法(批处理)
2019/01/18 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
策划主管的工作职责
2013/11/24 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
企业计划生育责任书
2015/05/09 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL