【HTML+javaScript】滚动-跑马灯

最新推荐文章于 2024-05-24 06:35:25 发布

原创最新推荐文章于 2024-05-24 06:35:25 发布 · 968 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的跑马灯效果案例。通过不断更新文本位置来达到跑马灯滚动显示的效果，背景设置为白色，文字颜色为橙色，并采用透明背景的输入框来展示跑马灯文字。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跑马灯</title>
</head>
<script language="javascript">
var msg="品味中原文化";
var sep=0;
var interval=400;/*移动速度*/
function LenScroll(){
	document.nextForm.lenText.value=msg.substring(sep,msg.length)+"  "+msg;
	sep++;
	if(sep>msg.length)
	sep=0;
	window.setTimeout("LenScroll();",interval);
	}
</script>
<style>
body{
	background-color:#FFFFFF;
	}
input{
	background:transparent;/*输入框背景透明*/
    color：#ffb400;
	font-size:20px;
	font-weight:bold;
	}
</style>
<body onLoad="LenScroll()">
<center>
<form name="nextForm">
<input type="text" name="lenText">
</form>
</center>
</body>
</html>