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

最新推荐文章于 2023-12-08 15:34:57 发布

一路向前！

最新推荐文章于 2023-12-08 15:34:57 发布

阅读量1k

点赞数 1

分类专栏： -----JavaScript

本文链接：https://blog.csdn.net/ytm15732625529/article/details/52902082

版权

本文介绍了如何结合CSS和JavaScript实现跑马灯特效。首先通过JavaScript设置文字内容和滚动速度，然后利用CSS对页面和输入框进行美化，如背景颜色、透明度和边框等，最终达到文字在黑色背景上流畅滚动的视觉效果。

摘要由CSDN通过智能技术生成

前言：

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=&