Rumah > hujung hadapan web > tutorial js > Kaedah JS menyeret tetikus untuk melukis kotak untuk merealisasikan kemahiran selection_javascript tetikus

Kaedah JS menyeret tetikus untuk melukis kotak untuk merealisasikan kemahiran selection_javascript tetikus

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:46:52
asal
1953 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menyeret tetikus untuk melukis kotak menggunakan JS untuk merealisasikan pemilihan tetikus. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Teknik JS yang sangat praktikal Seret tetikus untuk melukis kotak, yang boleh digunakan sebagai fungsi pemilihan Ia boleh digunakan untuk melukis carta alir, lakaran reka bentuk, dll. Ia juga boleh digunakan untuk memangkas dan memilih imej. semasa memuat naik avatar. Ia digunakan secara meluas dalam pemangkasan avatar Seret tetikus pada gambar untuk mengeluarkan kotak ini mewakili fungsi pemilihan. Ia bergantung terutamanya pada kod JavaScript untuk dilaksanakan.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<!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 &#63; evt.clientX + scrollLeft : startX) + "px";
   retcTop = (startY - evt.clientY - scrollTop > 0 &#63; 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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
js
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan