Maison >interface Web >js tutoriel >Exemple d'effet simple de glissement de souris utilisant les compétences javascript_javascript

Exemple d'effet simple de glissement de souris utilisant les compétences javascript_javascript

WBOYoriginal: 2016-05-16 16:05:031263parcourir

L'exemple de cet article décrit comment implémenter un simple effet de glissement de souris à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il est très courant de faire glisser un élément avec la souris et de le placer n'importe où sur la page Web. Par exemple, de nombreuses sections de modèles de blog peuvent être déplacées d'elles-mêmes vers la position correspondante.

Écrivons-en un simple qui peut obtenir l'effet du glissement de la souris.

Lorsque la souris est enfoncée, enregistrez la différence entre la position actuelle de la souris et la distance gauche de l'élément.
Lorsque la souris bouge, une valeur est attribuée à la position de l'élément, qui est la position de la souris, moins la différence à l'instant.
Lorsque la souris est relâchée, attribuez null au mouvement et au relâchement de la souris, afin qu'ils n'effectuent aucune autre action.

Point 1 :

disx = oevent.clientX - box.offsetLeft;

Pour déterminer la position du point de la souris sur l'élément lors du glisser, c'est la position de la souris moins la distance gauche de l'élément.

Point 2 :

box.style.left = oevent.clientX - disx + "px";

La position de l'élément lors du glissement, la position actuelle de la souris moins la valeur qui vient d'être calculée précédemment.

D'accord, voici le code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

Je voudrais l'améliorer à nouveau. Il n'y a pas de limite à la plage de déplacement de la souris ci-dessus, et parfois la fenêtre de déplacement n'est pas visible à l'extérieur. Limitons la portée

Point 1 : Comme suit, si la position gauche de l'élément est inférieure à 0, attribuez-lui la valeur 0. Si elle est supérieure à la taille de la fenêtre visuelle moins la largeur de l'élément lui-même, attribuez-lui la différence entre la taille de la fenêtre visuelle moins la largeur de l'élément lui-même.

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

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

Article précédent：Partage de conseils sur les expressions && et || dans les conseils javascript_javascriptArticle suivant：Partage de conseils sur les expressions && et || dans les conseils javascript_javascript

Articles Liés

Voir plus