suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert Text-Flash-Eingabeaufforderungscode, der den QQ-Avatar-Flash-Effekt_jquery imitiert

jQuery implementiert Text-Flash-Eingabeaufforderungscode, der den QQ-Avatar-Flash-Effekt_jquery imitiert

不言
不言Original
2018-05-24 09:09:352016Durchsuche

Das Beispiel in diesem Artikel beschreibt den jQuery-Text-Blink-Eingabeaufforderungscode, der den QQ-Avatar-Blinkeffekt imitiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JQuery-Blinktextaufforderungen imitieren blinkende QQ-Avatar-Aufforderungen und können für Fehleraufforderungen oder andere Anlässe verwendet werden, um die Aufmerksamkeit des Benutzers zu erregen.

shake(ele,cls,times)
ele : jQuery Object [object] Zu blinkendes Element
cls : Klassenname [string] Blinkende Klasse
times : Nummer [ Number] blinkt mehrmals mal

Beachten Sie, dass jQuery 1.4.2 und höher aufgerufen werden muss, andernfalls wird in der unteren Ecke der Webseite ein Fehler angezeigt.

Der spezifische Code lautet wie folgt: 

<!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>

Ich hoffe, dass dieser Artikel für alle in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert den Funktionscode zur automatischen Vervollständigung von E-Mail-AdressenNächster Artikel：jQuery implementiert den Funktionscode zur automatischen Vervollständigung von E-Mail-Adressen

In Verbindung stehende Artikel

Mehr sehen