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>的属性就都说完了，接下来就是大家多多练习的时候了。
网友评论