recherche

Maison >interface Web >js tutoriel >jQuery implémente un code d'invite de texte clignotant qui imite le clignotement de l'avatar QQ effect_jquery

jQuery implémente un code d'invite de texte clignotant qui imite le clignotement de l'avatar QQ effect_jquery

不言
不言original
2018-05-24 09:09:352045parcourir

L'exemple de cet article décrit le code d'invite clignotant du texte jQuery qui imite l'effet clignotant de l'avatar QQ. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Les invites de texte clignotantes jQuery, imitant les invites clignotantes de l'avatar QQ, peuvent être utilisées pour des invites d'erreur ou d'autres occasions pour attirer l'attention de l'utilisateur.

shake(ele,cls,times)
ele : jQuery Object [object] Élément à flasher
cls : Class Name [string] Classe clignotante
times : Number [ Number] clignote plusieurs fois fois

Notez que jQuery 1.4.2 et supérieur doit être appelé, sinon une erreur sera affichée dans le coin inférieur de la page Web.

Le code spécifique est le suivant : 

<!DOCTYPE HTML>
<html>
<head>
<title>QSL 社区闪动提示</title>
<style> 
 *{ margin:0; padding:0;}
 body{ background:#fff; font-family:Arial, Helvetica, sans-serif; background:#f9f9f9; font-size:14px; color:#333;}
 .main{ width:600px; background:#fff; margin:0 auto; padding:20px 0; border:solid #ddd; border-width:0 1px; min-height:800px;}
 .box{ width:240px; height:26px; line-height:26px; background:#f0f0f0; border:1px solid #ddd; text-align:center; font-size:14px; margin:20px auto;}
 input.box{ width:240px; font-weight:900; color:#999; display:block; background:#fff; text-align:left;}
 .red{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
 input.red{background:#ffe9e8;}
 #box1{ cursor:pointer;}
 .des{ margin:0 20px; padding:6px; line-height:20px; border:1px solid #ccc; color:#555;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js?7.1.34"></script>
<script> 
 function shake(ele,cls,times){
   var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
   if(t) return;
   t= setInterval(function(){
    i++;
    c = i%2 ? o+cls : o;
    ele.attr("class",c);
    if(i==2*times){
     clearInterval(t);
     ele.removeClass(cls);
     }
    },200);
   };
 $(function(){
  //domready 就闪动
  shake($("#box"),"red",3);
  //点击闪动
  $("#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);
     }
    }
   );
  });
</script>
</head>
 <body>
 <p class="main">
 <p class="des">闪动提示，可以用于错误提示或其他吸引用户注意力的场合 <br>
 shake(ele,cls,times)<br>
 ele : jQuery Object [object] 要闪动的元素<br>
 cls : Class Name [string] 闪动的类<br>
 times : Number [Number] 闪动几次
 </p>
<p id="box" class="box">打开就闪动</p><p id="box1" class="box">点击就闪动</p>
<input class="box" type="email" id="mail" placeholder="不是email地址就闪动" /> 
</p>
</body>
</html>

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

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：jQuery implémente le code de fonction de complétion automatique de l'adresse e-mailArticle suivant：jQuery implémente le code de fonction de complétion automatique de l'adresse e-mail

Articles Liés

Voir plus