CSS与JavaScript的综合应用---跑马灯特效

来源：互联网发布：r语言初学者指南数据编辑：程序博客网时间：2024/05/20 22:01

前言：

Javascript中的跑马灯是一种很吸引眼球的特效，通常是通过改变<input>来实现的。再配合上CSS，达到的效果非常完美。

首先：

按照传统JavaScript的方法制作跑马灯的效果，包括设置文字内容、跑动速度、以及相应的输入框。

<html><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"><!--body{background-color:#000000;/* 页面背景色 */}input{background:transparent;/* 输入框背景透明 */border:none;/* 无边框 */color:#ffb400;font-size:45px;font-weight:bold;font-family:黑体;}--></style>

效果2:

总结：

通过css属性对页面和输入框的美化，整个跑马灯会显得更加流畅，已经不再是文字在输入框中滚动的效果了。

1 0