打字文字、交替闪烁出现

2024-09-05 12:21:28

字体：大中小

来源：转载

供稿：网友

一个文本小特效，文字交替出现，闪烁出现，还有打字效果，不知道怎么形容，先运行一下代码看看吧，一看便知。

<html><head><title>打字文字、交替闪烁出现</title></head><SCRIPT LANGUAGE="JavaScript">neonBaseColor = "White";neonColor = "00ff00";num = 0;num2 = 0;num3 = 0;num4 = neonColor;function startNeon() {message = neon.innerText;neon.innerText = "";for(i = 0; i != message.length; i++) {neon.innerHTML += "<span id=/"neond/" style=/"color:"+neonBaseColor+"/">"+message.charAt(i)+"<//span>"};neon2();}function neon2() {if(num != message.length) {document.all.neond[num].style.color = neonColor;num++;setTimeout("neon2()", 100);}else {num = 0;num2 = message.length;setTimeout("neon4onev()", 2000);   }}function neon4onev() {document.all.neond[num].style.color = neonBaseColor;document.all.neond[num2-1].style.color = neonBaseColor;if(Math.floor(message.length / 2) + 1 != num2) {num++;num2--;setTimeout("neon4onev()", 50);}else {setTimeout("neon5()", 50);   }}function neon5() {if(num3 != message.length && num3 != message.length+1) {document.all.neond[num3].style.color = neonColor;num3 = num3 + 2;setTimeout("neon5()",100);}else {setTimeout("neon52()", 50);   }}function neon52() {if(num3 == message.length) {num3++;neon52a();}else {num3--;neon52a();   }}function neon52a() {if(num3 != 1) {num3 = num3 - 2;document.all.neond[num3].style.color = neonColor;setTimeout("neon52a()", 100);}else {if(num4 == neonColor) {num3 = 0;neonColor = neonBaseColor;setTimeout("neon5()", 2000);}else {neonColor = num4;num3 = 0;setTimeout("neon4onev2()", 50);      }   }}function neon4onev2() {document.all.neond[num].style.color = neonColor;document.all.neond[num2 - 1].style.color = neonColor;if(message.length != num2) {num--;num2++;setTimeout("neon4onev2()", 50);}else {num = 0;num2 = 0;setTimeout("neon3()", 2000);   }}function neon3() {if(num != message.length) {document.all.neond[num].style.color = neonBaseColor;num++;setTimeout("neon3()", 100);}else {num = 0;neon2();   }}</script><span id="neon">文字、交替闪烁出现</span><body onLoad="startNeon()"></body></html>

上一篇：Js让文字跟随鼠标围成一个旋转的圆圈

下一篇：流光溢彩的Js文字背景特效

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注