知道波浪吧，下面就实现非falsh的javascript波浪文字特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><br /> <html xmlns="http://www.w3.org/1999/xhtml"> <br /><br /> <head> <br /><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br /><br /> <title>javascript实现飘动波浪字效果</title> <br /><br /> </head> <br /><br /> <br /><br /> <body> <br /><br /> <script language="<a target="_blank" href="https://yangjunwei.com/tag/javascript" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 JavaScript 的文章" target="_blank">JavaScript</a>1.2"> <br /><br /> <br /><br /> //configure message <br /><br /> message="欢迎光临 诺豆网 https://yangjunwei.com" <br /><br /> //animate text in NS6? (0 will turn it off) <br /><br /> ns6switch=1 <br /><br /> <br /><br /> var ns6=document.getElementById&&!document.all <br /><br /> mes=new Array(); <br /><br /> mes[0]=-1; <br /><br /> mes[1]=-4; <br /><br /> mes[2]=-7;mes[3]=-10; <br /><br /> mes[4]=-7; <br /><br /> mes[5]=-4; <br /><br /> mes[6]=-1; <br /><br /> num=0; <br /><br /> num2=0; <br /><br /> txt=""; <br /><br /> function jump0(){ <br /><br /> if (ns6&&!ns6switch){ <br /><br /> jump.innerHTML=message <br /><br /> return <br /><br /> } <br /><br /> if(message.length > 6){ <br /><br /> for(i=0; i != message.length;i++){ <br /><br /> txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"}; <br /><br /> jump.innerHTML=txt; <br /><br /> txt=""; <br /><br /> jump1a() <br /><br /> } <br /><br /> else{ <br /><br /> alert("Your message is to short") <br /><br /> } <br /><br /> } <br /><br /> <br /><br /> function jump1a(){ <br /><br /> nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0 <br /><br /> nfinal.style.left=-num2; <br /><br /> if(num2 != 9){ <br /><br /> num2=num2+3; <br /><br /> setTimeout("jump1a()",50) <br /><br /> } <br /><br /> else{ <br /><br /> jump1b() <br /><br /> } <br /><br /> } <br /><br /> <br /><br /> function jump1b(){ <br /><br /> nfinal.style.left=-num2; <br /><br /> if(num2 != 0){num2=num2-3; <br /><br /> setTimeout("jump1b()",50) <br /><br /> } <br /><br /> else{ <br /><br /> jump2() <br /><br /> } <br /><br /> } <br /><br /> <br /><br /> function jump2(){ <br /><br /> txt=""; <br /><br /> for(i=0;i != message.length;i++){ <br /><br /> if(i+num > -1 && i+num < 7){ <br /><br /> txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>" <br /><br /> } <br /><br /> else{txt=txt+"<span>"+message.charAt(i)+"</span>"} <br /><br /> } <br /><br /> jump.innerHTML=txt; <br /><br /> txt=""; <br /><br /> if(num != (-message.length)){ <br /><br /> num--; <br /><br /> setTimeout("jump2()",50)} <br /><br /> else{num=0; <br /><br /> setTimeout("jump0()",50)}} <br /><br /> </script> <br /><br /> <h2><div id="jumpx" style="color:green"></div></h2> <br /><br /> <script> <br /><br /> if (document.all||document.getElementById){ <br /><br /> jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx <br /><br /> jump0() <br /><br /> } <br /><br /> else <br /><br /> document.write(message) <br /><br /> </script> <br /><br /> <div id="jumpx" style="color:green"></div> <br /><br /> </body> <br /><br /> </html>
