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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
小程序api实现promise封装过程解析
Nov 21 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调试的强悍利器之PHPDBG
2016/02/22 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Keras loss函数剖析
2020/07/06 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
市场营销专科应届生求职信
2013/11/24 职场文书
物流专业自荐信
2014/05/23 职场文书
不错的求职信范文
2014/07/20 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
欢迎家长标语
2014/10/08 职场文书
庆祝教师节标语
2014/10/09 职场文书
三八妇女节寄语
2015/02/27 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
nginx配置之并发频次限制
2022/04/18 Servers