Heim > Web-Frontend > js-Tutorial > JS-Methode zum Erlernen von Neontexteffekten_Javascript-Fähigkeiten

JS-Methode zum Erlernen von Neontexteffekten_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:46:37
Original
1745 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Sie den Neontexteffekt mit JS erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir JS, um den Neontext-Spezialeffektcode auf der Webseite zu implementieren. Schauen Sie sich den Laufeffekt an. Sie werden sehen, dass die Farbe des Textes wie ein Neonlicht ist, das sich kontinuierlich ändert, farbenfroh und blendend ist. daher heißt es „Text“, man kann es auch „Textfarbwechseleffekt“ nennen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>霓虹灯</title>
</head>
<body>
<script>
var Tname="欢迎您的到来!";
var Tlen=Tname.length;
document.write("<div id='a' style='font-size:40px;'>"+Tname+"</div>");
var col=new Array("#FFCC00","#3333FF","#FFCC00","#FF0000","#FFCC00","#CC33FF");
var ic=0;
function Dcolor(){
 var Strname="";
 for (i=0;i<Tlen;++i){
  var Strname=Strname+"<font color="+col[ic]+">"+Tname.substring(i,i+1)+"</font>";
 ic=ic+1;
  if (ic==col.length) ic=0;
 }
 a.innerHTML=Strname;
 setTimeout("Dcolor()",200);
}
Dcolor();
</script>
<span class="style5"></span>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage