Maison  >  Article  >  interface Web  >  Comment utiliser jquery pour obtenir un effet de texte clignotant

Comment utiliser jquery pour obtenir un effet de texte clignotant

coldplay.xixi
coldplay.xixioriginal
2020-12-07 10:40:362417parcourir

Comment utiliser jquery pour obtenir l'effet de texte clignotant : obtenez d'abord le pid de la dernière note, et flashez la note après l'avoir ajoutée avec succès ; S'il clignote, il doit y avoir une minuterie. Allumez simplement la minuterie.

Comment utiliser jquery pour obtenir un effet de texte clignotant

L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery3.2.1, ordinateur Dell G3.

Recommandé : Tutoriel vidéo jquery

Comment utiliser jquery pour obtenir l'effet de texte clignotant :

1, commencez par obtenir it Le pid de la dernière note. Ce pid peut être la valeur renvoyée par l'interface qui vous est donnée par le background.

2. La note clignotera une fois l'ajout réussi

3. La méthode clignotante peut être écrite dans la fonction et appelée directement.

4. S'il y a un clignotement, il doit y avoir une minuterie. Si vous allumez la minuterie, vous devez l'éteindre.

Exemple, flash à l'ouverture de la page.

Exemple de code :

<!DOCTYPE HTML> 
<html> 
<head> 
<title>闪动提示</title> 
<style>  
  *{ margin:0; padding:0;} 
   
  .box{color: #000} 
  
  .red{color:#d00;} 
 </style> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script>  
  function shake(element,className,times){ 
      var i = 0, 
  t = false , 
  o = element.attr("class"), 
  c = "", 
  timestimes = times||2; 
 
      if(t) return; 
 
      t = setInterval(function(){ 
i++; 
c = i%2 ? o + &#39; &#39; + className : o; 
element.attr("class",c); 
 
if(i==2*times){ 
  clearInterval(t); 
  element.removeClass(className); 
  } 
},200); 
 
      }; 
  $(function(){ 
    //domready 就闪动 
    shake($(".box"),"red",3); 
    });    
</script> 
</head> 
 <body> 
<div class="box">打开就闪动</div> 
</body> 
</html>

Le code suivant provoque deux types de flashs de clic et différents flashs de vérification, tels que le flash d'erreurs de saisie de formulaire.

Exemple de code :

//点击闪动 
$("#box1").bind({ 
    click:function(){ 
shake($(this),"red",3); 
return false; 
} 
}); 
//通不过mail校验闪动 
$("#mail").blur( 
    function(){ 
 if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) { 
shake($(this),"red",3); 
    } 
} 
);

Recommandations d'apprentissage associées : tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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