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

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

不言

Libérer： 2018-05-24 09:09:35

original

2036 Les gens l'ont consulté

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>

Copier après la connexion

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