模仿 LED 灯的滚动文字效果

请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。


0.前言

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

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

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

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

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

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

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

7E7857E4-9A96-4E37-8B0F-79A99F8247DC.png

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

2.代码实现

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

  1. JS 实现
  2. 特殊标签实现

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

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

那么这个标签是什么呢?

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

<marquee>并不是一个标准的HTML标签。
你如果把带有<marquee>的网页提交到W3C万维网标准化组织去认证的话。
它会报语法错误的。
近几年,火狐浏览器和谷歌浏览器也支持<marquee>标签。
所以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

推荐阅读更多精彩内容

  • 0.前言 2016年08月18日今天在网上查找到了...所以有了这篇文章,希望对你们有所帮助 1.如何模仿LED灯...
    灵魂渡劫者阅读 181评论 1 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,418评论 15 533
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,614评论 1 82
  • 0.前言 2016年08月18日今天在网上查找到 marquee,所以有了这篇文章。希望能对你们有一些帮助。 1....
    cld_bert阅读 978评论 1 1
  • 狂风和乌云来临,也意味着雷雨天气开始了,但是海燕似乎并没有飞起,街上行人匆匆,车流不断,形形色色却又都在生活中做着自己!
    海之泪阅读 9评论 0 0