JavaScript中的跑马灯是一种很吸引眼球的特效，通常是通过改变<input>来实现的。如果能更好的配合Css，便能够做到更加完美。
首先我们按照传统的JavaScript的方法制作跑马灯的效果，包括文字内容、跑动速度，以及相应的输入框。请看下面的代码：
<head>
<title>跑马灯</title>
<script language="javascript">
var msg="这是跑马灯，我跑啊跑啊跑"; //跑马灯的文字
var interval = 400; //跑动的速度
var seq=0;
function LenScroll() {
document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg;
seq++;
if ( seq > msg.length )
seq = 0;
window.setTimeout("LenScroll();", interval);
}
</script>
</head>
<body onLoad="LenScroll()">
<center>
<form name="nextForm">
<input type="text" name="lenText">
</form>
</center>
</body>
此时基本的文字运动效果已经出来了，其中msq参数设定文字内容，interval设定文字跑动的速度，读者可以自己修改相关参数来查看效果。此时的具体效果仅仅只是输入框中的文字在滚动，与最终的效果还有很大的差距。对页面<body>以及<input>标记加入相关的Css属性，页面背景设置为黑色，将输入框的背景设置透明，边框进行隐藏，再设置其他的文字属性，如下所示：
<style type="text/CSS(级联样式表,Cascading Style Sheet)">
<!--
body{
background-color:#000000; /* 页面背景色 */
}
input{
background:transparent; /* 输入框背景透明 */
border:none; /* 无边框 */
color:#ffb400;
font-size:45px;
font-weight:bold;
font-family:黑体;
}
-->
</style>
通过Css属性对页面和输入框的美化，整个跑马灯显得流畅了很多，已经不再是文字在输入框中的滚动效果了。
8857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
