Maison >interface Web >js tutoriel >jquery simule le stop motion du pointeur de la souris event_jquery

jquery simule le stop motion du pointeur de la souris event_jquery

WBOYoriginal: 2016-05-16 15:20:281324parcourir

L'exemple de cet article explique l'exemple de code de l'événement déclenché par le pointeur de la souris arrêtant le mouvement. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant
. Il existe divers événements de souris intégrés dans js, tels que les événements de clic, les événements mousemove, etc., mais il n'y a aucun événement où le pointeur de la souris cesse de bouger. Utilisons jquery pour simuler cet effet, j'espère que cela pourra apporter certains avantages. amis qui en ont besoin.
Le code est le suivant :

<html>
<head>
<meta charset="gb2312">
<title>鼠标指针停止运动</title>
<style type="text/css">
#top
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
#bottom
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
(function($){
 $.fn.moveStopEvent = function(callback){
  return this.each(function(){
   var x = 0,
   y = 0,
   x1 = 0,
   y1 = 0,
   isRun = false,
   si,
   self = this;
 
   var sif = function(){
    si = setInterval(function(){
     if(x == x1 && y ==y1)
         {
      clearInterval(si);
      isRun = false;
      callback && callback.call(self);
     }
     x = x1;
     y = y1;
    }, 500);
   }
 
   $(this).mousemove(function(e){
    x1 = e.pageX;
    y1 = e.pageY;
    !isRun && sif(), isRun = true;
   }).mouseout(function(){
    clearInterval(si);
    isRun = false;
   });
  });
 }
})(jQuery);
 
$(function(){
 $("#top,#bottom").moveStopEvent(function(){
  alert($(this).attr("id"));
 })
})
</script>
 
</head>
<body>
<div id="top">脚本之家一</div>
<br/>
<div id="bottom">脚本之家二</div>
</body>
</html>

Le code ci-dessus répond à nos exigences. Lorsque le pointeur de la souris cesse de bouger dans le div, la valeur de l'attribut id du div correspondant apparaîtra. Voici une introduction à son processus d'implémentation.
Commentaires du code :
1.(function($){}(jQuery), déclarez une fonction anonyme et exécutez cette fonction. Le paramètre est un objet jQuery.
2.$.fn.moveStopEvent=function(callback{}), ajoutez une fonction à l'objet instance jQuery.
3.retournez this.each(function(){}), parcourez chaque objet élément DOM dans la collection d'objets jQuery et utilisez cet objet comme contexte pour exécuter la fonction, ce qui signifie que ceci dans la fonction pointe vers chaque objet DOM. .
4.var x=0,y=0, déclarez les variables x et y et attribuez la valeur initiale à 0, qui sont utilisées pour stocker la coordonnée précédente du pointeur de la souris.
5.var x1=0, y1=0, déclarez les variables x1 et y1 et attribuez la valeur initiale à 0, qui sont utilisées pour stocker les coordonnées actuelles du pointeur de la souris.
6.var isRun = false, déclare une marque indiquant si le pointeur de la souris bouge.
7.var timer=null, déclare une marque comme valeur de retour de la fonction timer.
8.var self=this, attribue la référence de l'objet DOM actuel à la variable self.
9.var sif=function(){}, déclare une fonction pour déterminer si le pointeur de la souris s'arrête de bouger.
10.timer=setInterval(function(){},500), exécutez la fonction toutes les 500 millisecondes. Si le pointeur de la souris ne change pas de position dans les 500 millisecondes, il est considéré comme ayant arrêté de bouger.
11.x = x1, y = y1, stockez les coordonnées actuelles du pointeur de la souris dans x et y.
12.$(this).mousemove(function(e){}), enregistrez la fonction de traitement d'événement mousemove pour l'objet actuel.
13.x1 = e.pageX, stocke l'abscisse actuelle du pointeur de la souris dans x1.
14.y1 = e.pageY, stocke l'ordonnée actuelle de la souris dans y1.
15.!isRun && sif(), isRun = true, si la souris actuelle ne bouge pas, exécutez la fonction sif() et définissez isRun sur true. C'est-à-dire que lorsque le pointeur de la souris continue de bouger, il est garanti que la fonction sif() ne sera exécutée qu'une seule fois, sinon plusieurs de ces fonctions risquent d'être exécutées.
16.mouseout(function(){}) enregistre la fonction de traitement des événements mouseout. Bien sûr, il s'agit d'un appel en chaîne utilisé.
17.clearInterval(timer), arrête l'exécution de la fonction timer.
18.isRun = false, définissez la valeur de la variable sur false, indiquant que la souris a arrêté de bouger.

Ce qui précède représente l'intégralité du contenu de cet article, avec des commentaires détaillés sur le code. J'espère qu'il sera utile à tout le monde d'apprendre les événements de la souris.

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：Analyser l'ordre dans lequel les navigateurs exécutent le chargement des scripts JavaScript et les compétences d'exécution du code_javascriptArticle suivant：Analyser l'ordre dans lequel les navigateurs exécutent le chargement des scripts JavaScript et les compétences d'exécution du code_javascript

Articles Liés

Voir plus