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

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

WBOY

Lepaskan： 2016-05-16 15:35:08

asal

1710 orang telah melayarinya

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> js双滑块区间</title>
<style type='text/css'>
#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;}
</style>
</head>
<body>
<div id='range'>
 <div id='meaBox' onmousedown="change(this,event)"> </div>
 <div id='mea_l' class='mea' onmousedown="change(this,event)" ></div>
 <div id='mea_r' class='mea' onmousedown="change(this,event)" ></div>
</div>
<script type='text/javascript'>
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 > l_x + 20 && len>=0 && len<=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>=0 && r_x <=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;
 }
}
</script>
</body>
</html>

Salin selepas log masuk

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