模仿 LED 灯的滚动文字效果

来源：互联网发布：替代 usleep windows 编辑：程序博客网时间：2024/04/29 06:36

0.前言

2016年08月18日今天在网上查找到一个可以快速制作滚动文字的标签，之后通过查找资料以及测试，最后有了这篇文章。
希望本文能对你们产生一些帮助。

1.如何去模仿 LED 灯的滚动效果

在正文开始之前，首先来说说正常的 LED 灯是什么样子？

而滚动文字的实现原理是什么样子的呢？

之后我们来讨论下水平方向的移动文字。

外侧存在边框，内部去不停的移动。

最后说完水平移动文字之后，文字还可以竖直方向移动。

这个就是 滚动文字 的实现原理啦。

2.代码实现

HTML 中去实现文字滚动效果，基本有两种方式。

JS 实现
特殊标签实现

关于 JS 实现已经有非常多成熟的代码了，今天就先不讨论了。

今天重点来说一说，特殊标签的使用。

那么这个标签是什么呢？

没错，就是在传说中的 W3C 中都无法找到的 <marquee> 标签。

<marquee>并不是一个标准的HTML标签。
你如果把带有的网页提交到W3C万维网标准化组织去认证的话。
它会报语法错误的。
近几年，火狐浏览器和谷歌浏览器也支持标签。
所以marquee标签，在W3C里面没有，但还是可以用的。

以上内容摘自 百度百科。

那么我们接下来就开始使用<marquee>标签吧！~

当我们书写了 <marquee> 的时候，我们发现我们的标签自带了两个属性。

这两个属性分别代表了你的滚动文字的移动方式和滚动方向。

当然我们也可以不用管这写属性，直接在中间书写文字即可。

但是，既然有了这些属性，我是不是能使用这些属性创造出更好看的效果呢？

那么我们就一起来看看，<marquee> 标签还存在哪些其他属性吧。

属性名称属性介绍 behavior 滚动方式 direction 设置滚动方向 scrollamount 滚动速度 scrolldelay 滚动延迟 loop 滚动循环次数 width 元素的宽度 height 元素的高度 bgcolor 元素的背景颜色 hspace 水平方向的空白距离 vspace 垂直方向的空白距离

那么我们就从第一条属性，滚动方式开始说起。

3.属性详解

3.1 文字的滚动方式（behavior）

文字的滚动基本可以分为三种方式。

- - 循环滚动 scroll 滚动一次 slide 来回滚动 alternate

首先来看看循环滚动是什么吧？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee behavior="scroll" direction="">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

之后我们再来看看滚动一次是什么效果吧。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee behavior="slide" direction="">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

最后我们再来看一看，来回滚动是一种什么效果吧。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee behavior="alternate" direction="">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

3.2 滚动方向（direction）

关于滚动方向 direction 就很简单了，无非是上右下左而已。

- - up 上 right 右 down 下 left 左

可是需要注意一点，当你设置 right 的时候，文字移动实际上是从左往右移动的。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee behavior="scroll" direction="right">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

3.3 滚动速度（scrollamount）

既然我们的文字可以来回滚动，可以我们该如何去设置文字的一个滚动速度呢？

这时候又要利用到一个新的属性 scrollamount。

只是需要注意，该属性设置的是每次滚动移动长度，而且单位是 px，所以在使用的时候不要设置过大。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee        behavior="scroll"        direction="right"        scrollamount="100px">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

3.4 滚动延迟（scrolldelay）

滚动延迟可以说是和滚动速度有重复嫌疑的一个属性，只不过一个设置的每一次滚动时，文字滚动的距离，而滚动延迟则是让每一次滚动时中间的间隔时间更长而已，这两个属性可以理解为是相同的。

但是滚动延迟的单位是毫秒,而且是不支持使用具体单位呦。

1 秒 = 1000 毫秒 1s = 1000ms

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee        behavior="scroll"        direction="right"        scrollamount="100px"        scrolldelay="2000">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

3.5 循环次数（loop）

循环次数，效果如其名一般，就是让当前滚动文字滚动几次。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee        behavior="slide"        direction="right"        scrollamount="100px"        loop="2">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

3.6 其他属性

关于元素内部的 width 和 height，以及 bgcolor 在这里不做更多说明。

而 hspace 和 vspace 设置的其实是水平方向和垂直方向的空白距离。

再退一步来说，就是设置的是 margin。

也就是下面这个意思。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <marquee        behavior="slide"        direction="right"        scrollamount="100px"        loop="2"        vspace="20px"        hspace="50px">        李先生帅的感天动地，日月无光，        <br>        海枯石烂，四季如春，春暖花开    </marquee></body></html>

4. 后记

这篇文章到此就算是介绍结束了，最后也希望大家能够工作顺利。

如果喜欢这篇文章，可以留言点赞呦！~

李鹏
2016年08月18日19:19:56

1 0