Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie JQuery, um einen blinkenden Texteffekt zu erzielen

So verwenden Sie JQuery, um einen blinkenden Texteffekt zu erzielen

coldplay.xixi
coldplay.xixiOriginal
2020-12-07 10:40:362483Durchsuche

So verwenden Sie jquery, um den blinkenden Texteffekt zu erzielen: Rufen Sie zuerst die PID der neuesten Notiz ab und flashen Sie dann die Notiz, nachdem Sie sie erfolgreich hinzugefügt haben. Anschließend kann die blinkende Methode in die Funktion geschrieben und schließlich aufgerufen werden blinkt. Wenn Sie einen Timer benötigen, schalten Sie ihn einfach ein.

So verwenden Sie JQuery, um einen blinkenden Texteffekt zu erzielen

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer.

Empfohlen: jquery-Video-Tutorial

So verwenden Sie jquery, um den blinkenden Texteffekt zu erzielen:

1. Zuerst müssen Sie die PID der neuesten Notiz abrufen. Diese PID kann der von der zurückgegebene Wert sein Schnittstelle im Hintergrund.

2. Die Notiz blinkt, nachdem das Hinzufügen erfolgreich war.

3 Die Flash-Methode kann in die Funktion geschrieben und aufgerufen werden.

4. Wenn es blinkt, muss ein Timer vorhanden sein. Wenn Sie den Timer einschalten, müssen Sie den Timer ausschalten.

Beispiel: Flash beim Öffnen der Seite.

Codebeispiel:

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

Der folgende Code löst zwei Arten von Klick-Flashes und verschiedene Überprüfungs-Flashes aus, z. B. das Blinken von Formulareingabefehlern.

Codebeispiel:

//点击闪动 
$("#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); 
    } 
} 
);

Verwandte Lernempfehlungen:Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um einen blinkenden Texteffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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