search

Home  >  Article  >  Web Front-end  >  JavaScript implements the function of clicking the left mouse button for area selection

JavaScript implements the function of clicking the left mouse button for area selection

巴扎黑
巴扎黑Original
2017-09-14 11:58:014279browse

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

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

运行效果如下图所示：

具体代码如下：

<!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}
.p{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 p = document.createElement("p");
   p.id = wId + index;
   p.className = "p";
   p.style.marginLeft = startX + "px";
   p.style.marginTop = startY + "px";
   document.body.appendChild(p);
  }catch(e){
  //alert(e);
  }
 }
 document.onmouseup = function(){
  try{
   document.body.removeChild($(wId + index));
   var p = document.createElement("p");
   p.className = "retc";
   p.style.marginLeft = retcLeft;
   p.style.marginTop = retcTop;
   p.style.width = retcWidth;
   p.style.height = retcHeight;
   document.body.appendChild(p);
  }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>

The above is the detailed content of JavaScript implements the function of clicking the left mouse button for area selection. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS implementation of petal effect code displayNext article：JS implementation of petal effect code display

Related articles

See more