JS bertindak balas kepada klik tetikus untuk mencapai kesan menyeret antara dua kemahiran sliders

Rumah

hujung hadapan web

tutorial js

JS bertindak balas kepada klik tetikus untuk mencapai kesan menyeret antara dua kemahiran sliders_javascript

May 16, 2016 pm 03:35 PM

js seret peluncur

Contoh dalam artikel ini menerangkan dua kod kesan seret selang gelangsar yang dilaksanakan dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Bagaimana untuk melaksanakan fungsi peluncur pada halaman web? Malah, hanya gunakan JS Ini adalah peluncur halaman web Kedua-dua peluncur boleh diseret sewenang-wenangnya untuk membentuk julat peluncur Kod ini serasi dengan pelayar utama yang lain.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/

Kod khusus adalah seperti berikut:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt; js双滑块区间&lt;/title&gt;
&lt;style type='text/css'&gt;
#range{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#fff;border:1px inset #9C9B97}
#meaBox{position:absolute;width:148px;height:4px;background:#ccc;top:-2px;border:1px inset #9C9B97;border-left:0;border-right:0;}
.mea{position:absolute;top:-5px;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;}
#mea_l{left:0;}
#mea_r{right:0;border-top:13px solid #ff0000;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id='range'&gt;
 &lt;div id='meaBox' onmousedown="change(this,event)"&gt; &lt;/div&gt;
 &lt;div id='mea_l' class='mea' onmousedown="change(this,event)" &gt;&lt;/div&gt;
 &lt;div id='mea_r' class='mea' onmousedown="change(this,event)" &gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type='text/javascript'&gt;
var $id=function(o){return document.getElementById(o) || o;}
var change=function(o,e){
 var e = e &#63; e : window.event;
 if(!window.event) {e.preventDefault();}
 var init={
 mX: o.offsetLeft,
 lX: $id('mea_l').offsetLeft,
 rX: $id('mea_r').offsetLeft,
 dX: e.clientX
 };
 document.onmousemove=function(e){
 var e = e &#63; e : window.event;
 var dist=e.clientX-init.dX,
  len=init.mX + dist,
  l_x=init.lX,
  r_x=init.rX;
 switch (o.id){
  case 'mea_l':
  l_x=init.lX + dist;
  move();
  break;
  case 'mea_r':
  r_x=init.rX + dist;
  move();
  break;
  case 'meaBox':
  l_x=init.lX + dist;
  r_x=init.rX + dist;
  move2();
  break;
  default: break;
 }
 function move(){
  if(r_x &gt; l_x + 20 && len&gt;=0 && len&lt;=140 ) {
  o.style.left=len+"px";
  $id('meaBox').style.left= l_x + 'px';
  $id('meaBox').style.width=r_x - l_x + 'px';
  }
 };
 function move2(){
  if(l_x&gt;=0 && r_x &lt;=140 ) {
  o.style.left=len+"px";
  $id('mea_l').style.left= l_x + "px";
  $id('mea_r').style.left= r_x +"px";
  }
 };
 }
 document.onmouseup=function(){
 document.onmousemove=null;
 document.onmouseup=null;
 }
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

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