-
-
liyi674254133 小试身手Lv3
发表于2019-10-11 12:11
楼主
- <title>JavaScript实现的动态文字效果</title>
- <body>
- <script language="JavaScript">
- message="→悬赏走一走2333!"
- ns6switch=1
- var ns6=document.getElementById && !document.all
- mes=new Array();
- mes[0]=-1;
- mes[1]=-4;
- mes[2]=-7;mes[3]=-10;
- mes[4]=-7;
- mes[5]=-4;
- mes[6]=-1;
- num=0;
- num2=0;
- txt="";
- function jump0(){
- if (ns6 && !ns6switch){
- jump.innerHTML=message
- return
- }
- if(message.length > 6){
- for(i=0; i != message.length;i++){
- txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
- jump.innerHTML=txt;
- txt="";
- jump1a()
- }
- else{
- alert("Your message is to short")
- }
- }
- function jump1a(){
- nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
- nfinal.style.left=-num2;
- if(num2 != 9){
- num2=num2+3;
- setTimeout("jump1a()",50)
- }
- else{
- jump1b()
- }
- }
- function jump1b(){
- nfinal.style.left=-num2;
- if(num2 != 0){num2=num2-3;
- setTimeout("jump1b()",50)
- }
- else{
- jump2()
- }
- }
- function jump2(){
- txt="";
- for(i=0;i != message.length;i++){
- if(i+num > -1 && i+num < 7){
- txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
- }
- else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
- }
- jump.innerHTML=txt;
- txt="";
- if(num != (-message.length)){
- num--;
- setTimeout("jump2()",50)}
- else{num=0;
- setTimeout("jump0()",50)}}
- </script>
- <h2><div id="jumpx" style="color:green"></div></h2>
- <script>
- if (document.all||document.getElementById){
- jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
- jump0()
- }
- else
- document.write(message)
- </script>
- </body>