Rumah > Artikel > hujung hadapan web > JS melaksanakan kesan seret tetikus bagi kemahiran layer_javascript lipatan boleh dikembangkan

JS melaksanakan kesan seret tetikus bagi kemahiran layer_javascript lipatan boleh dikembangkan

PHP中文网asal: 2016-05-16 15:37:121229semak imbas

Contoh dalam artikel ini menerangkan kesan seretan tetikus lapisan lipatan boleh dikembangkan menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kesan lapisan penyeretan tetikus yang dilaksanakan oleh kod JS ringkas. Sila rujuk padanya. Klik bar tajuk lapisan dengan tetikus untuk mengembangkan dan meruntuhkan kandungan lapisan, dan tekan dan tahan bar tajuk untuk menyeret lapisan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http: //demo.jb51.net/ js/2015/js-fade-out-mouse-draw-style-demo/

Kod khusus adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>鼠标拖曳</title>
 </head>
 <body>
 <script type="text/javascript">
 function drag(elementToDrag,event){
  var startX=event.clientX,startY=event.clientY;
  var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
  var deltaX=startX-origX,deltaY=startY-origY;
  if(document.addEventListener){
    document.addEventListener("mousemove",moveHandler,true); 
  document.addEventListener("mouseup",upHandler,true);
 }
 else{
  elementToDrag.setCapture();
  elementToDrag.attachEvent("onmousemove",moveHandler);
  elementToDrag.attachEvent("onmouseup",upHandler);
  elementToDrag.attachEvent("onlosecapture",upHandler);
 }
 if(event.stopPropagation) event.stopPropagation();
 else event.cancelBubble=true;
 if(event.preventDefault) event.preventDefault();
 else event.returnValue=false;
 function moveHandler(e){
  if(!e) e=window.event;
  elementToDrag.style.left=(e.clientX-deltaX)+"px";
  elementToDrag.style.top=(e.clientY-deltaY)+"px";
  elementToDrag.style.zIndex="10";
  elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"
  </br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>
  "+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble = true;
 }
 function upHandler(e){
  if(!e) e=window.event;
   elementToDrag.style.zIndex="1";
  if(document.removeEventListener){
   document.removeEventListener("mouseup",upHandler,true);
  document.removeEventListener("mousemove",moveHandler,true);
  }
  else{
   elementToDrag.detachEvent("onlosecapture",upHandler);
  elementToDrag.detachEvent("onmouseup",upHandler);
  elementToDrag.detachEvent("onmousemove",moveHandler);
  elementToDrag.releaseCapture();
  }
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble=true;
 }
 }
 </script>
 <div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" 
  onmousedown="drag(this.parentNode,event)">Drag Me1</div>
 <p>test</p>
 </div>
 <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" 
  onmousedown="drag(this.parentNode,event)">Drag Me2</div>
 <p>test</p>
 </div>
 <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold"
   onmousedown="drag(this.parentNode,event)">Drag Me3</div>
 <p>test</p>
 </div>
 </body>
</html>

Di atas adalah kandungan JS untuk merealisasikan kesan seretan tetikus kemahiran lipat lapisan_javascript yang boleh dikembangkan Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php. cn)!

Kenyataan：

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

Artikel sebelumnya：JS melaksanakan TAB biasa dan kesan lapisan pop timbul (label TAB, lintasan zebra, lapisan topeng, dll.)_kemahiran javascriptArtikel seterusnya：JS melaksanakan TAB biasa dan kesan lapisan pop timbul (label TAB, lintasan zebra, lapisan topeng, dll.)_kemahiran javascript

Artikel berkaitan

Lihat lagi