像波浪一样的JS动态文字特效

日期：2018-10-23 浏览：66 评论：0

再发一个JS文字特效，发浪的文字，像波浪一样的动态文字效果，第一个文字晃动后，紧随其后的文字就跟着晃动，一层一层的晃动，就像波浪一样，所以就叫它为波浪文字吧。

<html>
<head>
<title>发浪的文字</title>
<script>
message="欢迎来到可爱久久www.ke299.com!"
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("http://www.aspku.com")
}
}
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>
</head>
<body>
<h2><div id="jumpx" style="color:33ff33"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>
</body>
</html>

打赏

更多>同类网页特效

0 条相关评论

推荐图文

推荐网页特效

像波浪一样的JS动态文字特效

点击排行

本网站所有网站模板/源码、和资料教程均为软件作者提供和网友推荐收集各大资源网站整理而来，网站源码、网站模板、资料下载：仅供学习和研究使用。不得使用于非法商业用途，不得违反国家法律。一切关于该资源商业行为与www.ke299.com无关。如有侵权、不妥之处，请联系站长以便删除。敬请谅解！侵权/投稿邮箱：ke299@qq.com。

• 几种文字排列特效，有从右往左读的，有从上往下	• CSS仿XP的链接文字特效_文本链接特效
• JavaScript文字遮罩效果_文本链接特效	• 鼠标滑过文字打开链接的JS_文本链接特效
• JS文字抖动_文本链接特效	• CSS阴影文字效果_文本链接特效
• 三行文字成批间隙滚动的走马灯效果	• 拖动鼠标画出文字的JavaScript特效
• JS让文字反向显示_文本链接特效	• Wingdings特殊字符及符号对照表_文本链接