一篇文章幫助你理解跑馬燈的滾動原理
點擊上方“IT共享之家”，進行關注
回復“資料”可獲贈Python學習福利
走馬燈效果其實就是利用<marquee>標簽進行圖片和文字滾動，設置的樣式不一樣，滾動的效果就不一樣，實現(xiàn)“走馬觀花”的效果。
一、滾動方式
1. 普通滾動
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></body><marquee>這里是您要填的內(nèi)容</marquee></html>
1.1 文字碰到左邊就會停止
<marquee behavior="slide">這里是您要填的內(nèi)容</marquee>
1.2 文字碰到右邊就會停止
<marquee behavior="slide" direction="right">這里是您要填的內(nèi)容</marquee>
2.圖片滾動
2.1 預設滾動
圖片滾動到右邊界，自動再從左邊滾動。
<marquee behavior="scroll"><img src="img/border.png"></marquee>
2.2 來回滾動
<marquee behavior="alternate"><img src="img/border.png"></marquee>
2.3 滾動的方向
向左滾動
<marquee direction="left"><img src="img/border.png"></marquee> 向右滾動
<marquee direction="right"><img src="img/border.png"></marquee>向下滾動
<marquee direction="down"><img src="img/border.png"></marquee>向上滾動
<marquee direction="up"><img src="img/border.png"></marquee>
二、參數(shù)
1. 設定滾動次數(shù)(可自行更改參數(shù))
<marquee loop="2">這里是您要填的內(nèi)容</marquee>2. 設定背景顏色 (16進位顏色或文字輸入)
<marquee bgcolor="#??????">這里是您要填的內(nèi)容</marquee>3. 設定滾動寬度
為了方便辨別，這里加上bgcolor屬性。
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><body><div ><p>初始化</p><marquee bgcolor="red"; >這里是您要填的內(nèi)容</marquee></div><div><p>設置高度</p><marquee bgcolor="aqua";width="380">這里是您要填的內(nèi)容</marquee></div></body></html>
4. 設定滾動高度
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><body><div ><p>初始化</p><marquee bgcolor="red"; >這里是您要填的內(nèi)容</marquee></div><div><p>設置高度</p><marquee bgcolor="aqua"; height="38">這里是您要填的內(nèi)容</marquee></div></body></html>
5. 設定滾動速度 (可自行更改參數(shù))
<marquee scrollamount="30">這里是您要填的內(nèi)容</marquee>
三、總結
本文以html為基礎，主要介紹了常見的效果（跑馬燈）的滾動原理，詳細介紹了三種常見的滾動以及其相關屬性，以及對設置參數(shù)時遇到的難題一一解答，希望能夠幫助你學習。
看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請在微信后臺回復【入群】
------------------- End -------------------
往期精彩文章推薦：
評論
圖片
表情