1秒登錄
走馬燈效果其實就是利用 標簽進行圖片和文字滾動，設置的樣式不一樣，滾動的效果就不一樣，實現“走馬觀花”的效果。 一、滾動方式 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 文字碰到右邊就會停止 這里是您要填的內容 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為基礎，主要介紹了常見的效果（跑馬燈）的滾動原理，詳細介紹了三種常見的滾動以及其相關屬性，以及對設置參數時遇到的難題一一解答，希望能夠幫助你學習。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </body> <marquee>這里是您要填的內容</marquee> </html>
<marquee behavior="slide">這里是您要填的內容</marquee>
這里是您要填的內容
圖片滾動到右邊界，自動再從左邊滾動。
<marquee behavior="scroll"><img src="img/border.png"></marquee>
<marquee behavior="alternate"><img src="img/border.png"></marquee>
向左滾動
<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>
<marquee loop="2">這里是您要填的內容</marquee>
<marquee bgcolor="#??????">這里是您要填的內容</marquee>
為了方便辨別，這里加上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>
<!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>
<marquee scrollamount="30">這里是您要填的內容</marquee>
本文以html為基礎，主要介紹了常見的效果（跑馬燈）的滾動原理，詳細介紹了三種常見的滾動以及其相關屬性，以及對設置參數時遇到的難題一一解答，希望能夠幫助你學習。
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
