Maison >interface Web >js tutoriel >Comment utiliser jquery pour obtenir un effet de texte clignotant
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.
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 + ' ' + 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!