HTML文字波浪形前进后退效果

最新推荐文章于 2021-12-03 17:03:24 发布

菜鸟下山

最新推荐文章于 2021-12-03 17:03:24 发布

阅读量1.1k

点赞数

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/huzijia888/article/details/78782295

版权

这段HTML代码展示了如何创建一个文字波浪形前进后退的动态效果。通过使用JavaScript和CSS，文字会沿着预设路径上下移动，当达到边界时会改变移动方向。代码中设置了文字的位置和移动逻辑，通过`setInterval`定时调用`move`函数来实现连续的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>

<style>
#field{
position:absolute;/*设置出一个用于字体移动的区域*/
top:0px;
left:0px;
width:500px;
height:50px;
}

</style>
<script>
var flag=new Array(0,0,0,0,0,0,0,0);//判定各个文字竖直移动方向的标志位数组
var leflag=0;//确定文字水平移动方向的标志位
function move(){//令文字移动的函数
var oppo=document.getElementsByTagName("span");//获取所有文字对象
var lefmi=oppo[0].style.left.substring(0,oppo[0].style.left.indexOf("p"));//获取第一个字的水平位置
var lefmin=Number(lefmi);//转化成数字
var lefma=oppo[7].style.left.substring(0,oppo[7].style.left.indexOf("p"));//获取最后一个字的水平位置
var lefmax=Number(lefma);//转化成数字
if(lefmax==499){//通过最后一个字的水平位置判定文字移动是否到达右边界，到达右边界就养将文字向左移动
leflag=1;
}
if(lefmin==1){//通过第一个字的水平位置判断文字是否移动到了左边界，如果到了，就将文字向右移动
leflag=0;
}
for(var i=0;i<oppo.length;i++){//依次移动文字的位置
var to=oppo[i].style.top.substring(0,oppo[i].style.top.indexOf("p"));//获得每个文字的竖直位置以及水平位置
var lef=oppo[i].style.left.substring(0,oppo[i].style.left.indexOf("p"));
var lefnum=Number(lef);//转化为数字
var tonum=Number(to);
if(leflag==0){//向左移动
lefnum=lefnum+1;
}
else{
lefnum=lefnum-1;//向右移动
}
if(tonum==0){//到了上边界，相应标志位改为向下移动标志位
flag[i]=0;
}
if(tonum==49){//到了下边界，相应标志位改为向上移动标志位
flag[i]=1;
}
if(flag[i]==0){//向下移动
tonum=tonum+1;
}
else{
tonum=tonum-1;//向上移动
}
oppo[i].style.left=lefnum+"px";//改变文字位置属性
oppo[i].style.top=tonum+"px";
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<fieldset id="field"><span>中</span><span>国</span><span>地</span><span>质</span><span>大</span><span>学</span><span>武</span><span>汉</span></fieldset>
<script>
var kk=new Array("0","7","13","19","25","31","37","43","49");//初始化的文字竖直位置数组
var lef=0;
var oppo=document.getElementsByTagName("span");
for(var i=0;i<oppo.length;i++){//依次初始化文字的水平个竖直位置
oppo[i].style.position="absolute";
oppo[i].style.top=kk[i]+"px";
oppo[i].style.left=lef+"px";
lef=lef+20;
}
setInterval("move()",20);
</script>
</body>
</html>