0.前言
2016年08月18日今天在網(wǎng)上查找到 marquee拖刃，所以有了這篇文章掸茅。
希望能對你們有一些幫助。
1.如何去模仿屏幕文字的滾動效果呢状知？
正常的 led 燈是什么樣子贸铜？
http://img3.imgtn.bdimg.com/it/u=1292485080,1984796979&fm=21&gp=0.jpg
而滾動文字的實現(xiàn)原理是什么樣子的呢堡纬？
首先來說水平方向的文字移動。
外側(cè)存在邊框蒿秦，內(nèi)部文字水平移動烤镐。
接著說一下豎直方向的文字移動
外側(cè)存在邊框，內(nèi)部文字豎直移動棍鳖。
這樣咱們就把文字移動的原理說清楚了职车，你懂了嗎？
2.代碼實現(xiàn)
HTML 中實現(xiàn)文字滾動效果，基本有兩種方式悴灵。
（1）js 實現(xiàn)
（2）特殊標(biāo)簽實現(xiàn)
關(guān)于 js 實現(xiàn)呢，已經(jīng)有很多代碼了骂蓖，今天咱們就不在這里講了积瞒。
今天咱們要講的是特殊標(biāo)簽實現(xiàn)，相對比較簡單登下。
那么這個標(biāo)簽是什么呢茫孔？ 他就是<marquee>標(biāo)簽，要知道哦被芳，這個標(biāo)簽在 w3c 上都沒有缰贝。
那么我們接下來就開始使用 <marquee>標(biāo)簽吧！
當(dāng)我們寫了<marquee>的時候畔濒，我們發(fā)現(xiàn)我們的標(biāo)簽自帶了兩個屬性剩晴。
這兩個標(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="">
原來你是我最想留住的幸運，
<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="">
原來你是我最想留住的幸運绽左，
<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="">
原來你是我最想留住的幸運艇潭，
<br>
原來我們和愛情曾經(jīng)靠的那么近拼窥。
</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>
原來我們和愛情曾經(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">
原來你是我最想留住的幸運，
<br>
原來我們和愛情曾經(jīng)靠的那么近隔心。
</marquee>
</body>
</html>
3.4文字的滾動延遲
到這里咱們說一下<scrolldelay>白群，可以說這個和<scrollamount>有點重復(fù)。<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>
原來我們和愛情曾經(jīng)靠的那么近。
</marquee>
</body>
</html>
3.5滾動文字的循環(huán)次數(shù)
既然說到滾動文字粱玲，肯定會有循環(huán)次數(shù)躬柬，那么咱們就來說一下循環(huán)次數(shù)<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>
原來我們和愛情曾經(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">
原來你是我最想留住的幸運怜森，
<br>
原來我們和愛情曾經(jīng)靠的那么近速挑。
</marquee>
</body>
</html>
4.0總結(jié)
這樣咱們就把<marquee>的屬性就都說完了，接下來就是大家多多練習(xí)的時候了副硅。
