Maison > interface Web > js tutoriel > le corps du texte

JS répond aux clics de souris pour obtenir un effet de glissement entre deux compétences sliders_javascript

WBOY
Libérer: 2016-05-16 15:35:08
original
1708 Les gens l'ont consulté

L'exemple de cet article décrit les deux codes d'effet de glissement d'intervalle de curseur implémentés dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Comment implémenter la fonction slider sur la page web ? En fait, utilisez simplement JS. Il s'agit d'un curseur de page Web. Les deux curseurs peuvent être déplacés arbitrairement pour former une plage de curseurs. Le code est compatible avec IE et d'autres navigateurs grand public.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal