0.前言
2016年08月18日今天在網(wǎng)上查找到 marquee，所以有了這篇文章。
希望能對你們有一些幫助。
1.如何去模仿屏幕文字的滾動效果呢？
正常的 led 燈是什么樣子？
http://img3.imgtn.bdimg.com/it/u=1292485080,1984796979&fm=21&gp=0.jpg
而滾動文字的實(shí)現(xiàn)原理是什么樣子的呢？
首先來說水平方向的文字移動。
外側(cè)存在邊框，內(nèi)部文字水平移動。
接著說一下豎直方向的文字移動
外側(cè)存在邊框，內(nèi)部文字豎直移動。
這樣咱們就把文字移動的原理說清楚了，你懂了嗎？
2.代碼實(shí)現(xiàn)
HTML 中實(shí)現(xiàn)文字滾動效果，基本有兩種方式。
（1）js 實(shí)現(xiàn)
（2）特殊標(biāo)簽實(shí)現(xiàn)
關(guān)于 js 實(shí)現(xiàn)呢，已經(jīng)有很多代碼了，今天咱們就不在這里講了。
今天咱們要講的是特殊標(biāo)簽實(shí)現(xiàn)，相對比較簡單。
那么這個(gè)標(biāo)簽是什么呢？ 他就是<marquee>標(biāo)簽，要知道哦，這個(gè)標(biāo)簽在 w3c 上都沒有。
那么我們接下來就開始使用 <marquee>標(biāo)簽吧！
當(dāng)我們寫了<marquee>的時(shí)候，我們發(fā)現(xiàn)我們的標(biāo)簽自帶了兩個(gè)屬性。
這兩個(gè)標(biāo)簽分別代表了你的滾動文字的移動方式和移動方向。
除此之外，<marquee>還有其他屬性。
| 屬性名稱 | 屬性介紹 |
|---|---|
| scrollamount | 滾動速度 |
| scrolldelay | 滾動延遲 |
| loop | 滾動循環(huán)次數(shù) |
| width/height | 寬度/高度 |
| bgcolor | 背景顏色 |
| hspace | 水平空間空白 |
| vspace | 垂直空間空白 |
那么我們就從第一條屬性開始說起
3.屬性詳解
3.1文字的滾動方式
文字的滾動方式有3種
- 循環(huán)滾動 scroll
- 滾動一次 slide
- 來回滾動 alternate
先看循環(huán)滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<marquee behavior="scroll" direction="">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
接下來看看滾動一次的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<marquee behavior="slide" direction="">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
最后來看一下來回滾動吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<marquee behavior="alternate" direction="">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.2文字的移動方向
移動方向無非是 上下左右
| - | - |
|---|---|
| up | 上 |
| down | 下 |
| left | 左 |
| right | 右 |
但是左右移動的時(shí)候，就要注意了。right 是從左往右移動，left 是從右往左移動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<marquee behavior="scroll" direction="left">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.3文字的滾動速度
現(xiàn)在開始說一下文字滾動速度 <scrollamount>
這里要注意一下，滾動速度指的是 每次滾動的移動長度，且單位為 “px”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="25px">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.4文字的滾動延遲
到這里咱們說一下<scrolldelay>，可以說這個(gè)和<scrollamount>有點(diǎn)重復(fù)。<scrolldelay>它指的是元素 每次移動（指每次移動的幾 px） 的延遲時(shí)間。注意的是單位為毫秒（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">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.5滾動文字的循環(huán)次數(shù)
既然說到滾動文字，肯定會有循環(huán)次數(shù)，那么咱們就來說一下循環(huán)次數(shù)<loop>。
其實(shí) 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">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.6其他屬性
像<midth>、<height>以及 <bgcolor>大家應(yīng)該已經(jīng)很熟悉了，咱們就不在這里說了，現(xiàn)在咱們來說一下<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">
原來你是我最想留住的幸運(yùn)，
<br>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
4.0總結(jié)
這樣咱們就把<marquee>的屬性就都說完了，接下來就是大家多多練習(xí)的時(shí)候了。
