展示屏幕文字滚动效果

0.前言

2016年08月18日今天在网上查找到 marquee，所以有了这篇文章。
希望能对你们有一些帮助。

1.如何去模仿屏幕文字的滚动效果呢？

正常的 led 灯是什么样子？
http://img3.imgtn.bdimg.com/it/u=1292485080,1984796979&fm=21&gp=0.jpg

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

首先来说水平方向的文字移动。

外侧存在边框，内部文字水平移动。

接着说一下竖直方向的文字移动

外侧存在边框，内部文字竖直移动。

这样咱们就把文字移动的原理说清楚了，你懂了吗？

2.代码实现

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

（1）js 实现
（2）特殊标签实现

关于 js 实现呢，已经有很多代码了，今天咱们就不在这里讲了。

今天咱们要讲的是特殊标签实现，相对比较简单。

那么这个标签是什么呢？他就是<marquee>标签，要知道哦，这个标签在 w3c 上都没有。

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

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

Paste_Image.png

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

除此之外，<marquee>还有其他属性。

属性名称	属性介绍
scrollamount	滚动速度
scrolldelay	滚动延迟
loop	滚动循环次数
width/height	宽度/高度
bgcolor	背景颜色
hspace	水平空间空白
vspace	垂直空间空白

那么我们就从第一条属性开始说起

3.属性详解

3.1文字的滚动方式

文字的滚动方式有3种

循环滚动 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文字的移动方向

移动方向无非是上下左右

-	-
up	上
down	下
left	左
right	右

但是左右移动的时候，就要注意了。right 是从左往右移动，left 是从右往左移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <marquee behavior="scroll" direction="left">
        原来你是我最想留住的幸运，
        <br>
        原来我们和爱情曾经靠的那么近。
    </marquee>
</body>
</html>

3.3文字的滚动速度

现在开始说一下文字滚动速度 <scrollamount>
这里要注意一下，滚动速度指的是每次滚动的移动长度，且单位为 “px”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <marquee behavior="scroll" direction="left" scrollamount="25px">
        原来你是我最想留住的幸运，
        <br>
        原来我们和爱情曾经靠的那么近。
    </marquee>
</body>
</html>

3.4文字的滚动延迟

到这里咱们说一下<scrolldelay>，可以说这个和<scrollamount>有点重复。<scrolldelay>它指的是元素每次移动（指每次移动的几 px）的延迟时间。注意的是单位为毫秒（ms）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <marquee behavior="scroll" direction="left" scrollamount="25px" scrolldelay="500">
        原来你是我最想留住的幸运，
        <br>
        原来我们和爱情曾经靠的那么近。
    </marquee>
</body>
</html>

3.5滚动文字的循环次数

既然说到滚动文字，肯定会有循环次数，那么咱们就来说一下循环次数<loop>。
其实 loop 等于多少就是几次了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <marquee behavior="slide" direction="left" scrollamount="25px"  loop="2">
        原来你是我最想留住的幸运，
        <br>
        原来我们和爱情曾经靠的那么近。
    </marquee>
</body>
</html>

3.6其他属性

像<midth>、<height>以及 <bgcolor>大家应该已经很熟悉了，咱们就不在这里说了，现在咱们来说一下<hspace>、<vspace>吧！
<hspace>指的是水平空白空间，<vspace>指的是垂直空白空间。
什么是空白空间呢，咱们来看看盒模型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <marquee behavior="slide" direction="left" scrollamount="25px"
             width="500px" height="250px" bgcolor="yellow"
             loop="-1" hspace="50px" vspace="50px">
        原来你是我最想留住的幸运，
        <br>
        原来我们和爱情曾经靠的那么近。
    </marquee>
</body>
</html>

4.0总结

这样咱们就把<marquee>的属性就都说完了，接下来就是大家多多练习的时候了。