走馬燈效果:如何實現“走馬觀花”效果?
走馬燈效果其實就是利用<marquee>標簽進行圖片和文字滾動,設置的樣式不一樣,滾動的效果就不一樣,實現“走馬觀花”的效果。
一、滾動方式
1. 普通滾動
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>
</body> <marquee>這里是您要填的內容</marquee></html>

1.1 文字碰到左邊就會停止
<marquee behavior="slide">這里是您要填的內容</marquee>

1.2 文字碰到右邊就會停止
<marquee behavior="slide" direction="right">這里是您要填的內容</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>

二、參數
1. 設定滾動次數(可自行更改參數)
<marquee loop="2">這里是您要填的內容</marquee>
2. 設定背景顏色 (16進位顏色或文字輸入)
<marquee bgcolor="#??????">這里是您要填的內容</marquee>
3. 設定滾動寬度
為了方便辨別,這里加上bgcolor屬性。
<!doctype html><html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title>
<body> <div > <p>初始化</p> <marquee bgcolor="red"; >這里是您要填的內容</marquee> </div> <div> <p>設置高度</p> <marquee bgcolor="aqua";width="380">這里是您要填的內容</marquee> </div>
</body></html>

4. 設定滾動高度
<!doctype html><html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title>
<body> <div > <p>初始化</p> <marquee bgcolor="red"; >這里是您要填的內容</marquee> </div> <div> <p>設置高度</p> <marquee bgcolor="aqua"; height="38">這里是您要填的內容</marquee> </div>
</body></html>

5. 設定滾動速度 (可自行更改參數)
<marquee scrollamount="30">這里是您要填的內容</marquee>

三、總結
本文以html為基礎,主要介紹了常見的效果(跑馬燈)的滾動原理,詳細介紹了三種常見的滾動以及其相關屬性,以及對設置參數時遇到的難題一一解答,希望能夠幫助你學習。
請輸入評論內容...
請輸入評論/評論長度6~500個字
最新活動更多
- 1 AI狂歡遇上油價破百,全球股市還能漲多久? | 產聯看全球
- 2 OpenAI深夜王炸!ChatGPT Images 2.0實測:中文穩、細節炸,設計師慌了
- 3 6000億美元估值錨定:字節跳動的“去單一化”突圍與估值重構
- 4 Tesla AI5芯片最新進展總結
- 5 連夜測了一波DeepSeek-V4,我發現它可能只剩“審美”這個短板了
- 6 熱點丨AI“瑜亮之爭”:既生OpenClaw,何生Hermes?
- 7 AI界的殺豬盤:9秒刪庫跑路,全員被封號,還繼續扣錢!
- 8 2026,人形機器人只贏了面子
- 9 DeepSeek降價90%:價格屠夫不是身份,是戰略
- 10 AI Infra產業鏈卡在哪里了?


分享













