走馬燈效果其實(shí)就是利用＜marquee＞標(biāo)簽進(jìn)行圖片和文字滾動，設(shè)置的樣式不一樣，滾動的效果就不一樣，實(shí)現(xiàn)“走馬觀花”的效果。

一、滾動方式

1． 普通滾動

＜！doctype html＞＜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  預(yù)設(shè)滾動

圖片滾動到右邊界，自動再從左邊滾動。

＜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ù)（可自行更改參數(shù)）

＜marquee loop＝＂2＂＞這里是您要填的內(nèi)容＜／marquee＞

2． 設(shè)定背景顏色 （16進(jìn)位顏色或文字輸入）
＜marquee bgcolor＝＂＃？？？？？？＂＞這里是您要填的內(nèi)容＜／marquee＞

3． 設(shè)定滾動寬度

為了方便辨別，這里加上bgcolor屬性。

＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞Document＜／title＞
       ＜body＞        ＜div ＞            ＜p＞初始化＜／p＞            ＜marquee bgcolor＝＂red＂； ＞這里是您要填的內(nèi)容＜／marquee＞        ＜／div＞        ＜div＞            ＜p＞設(shè)置高度＜／p＞            ＜marquee bgcolor＝＂aqua＂；width＝＂380＂＞這里是您要填的內(nèi)容＜／marquee＞        ＜／div＞
＜／body＞＜／html＞

4． 設(shè)定滾動高度

＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞Document＜／title＞
       ＜body＞        ＜div ＞            ＜p＞初始化＜／p＞            ＜marquee bgcolor＝＂red＂； ＞這里是您要填的內(nèi)容＜／marquee＞        ＜／div＞        ＜div＞            ＜p＞設(shè)置高度＜／p＞            ＜marquee bgcolor＝＂aqua＂； height＝＂38＂＞這里是您要填的內(nèi)容＜／marquee＞        ＜／div＞
＜／body＞＜／html＞

5． 設(shè)定滾動速度 （可自行更改參數(shù)）

＜marquee scrollamount＝＂30＂＞這里是您要填的內(nèi)容＜／marquee＞

三、總結(jié)

本文以html為基礎(chǔ)，主要介紹了常見的效果（跑馬燈）的滾動原理，詳細(xì)介紹了三種常見的滾動以及其相關(guān)屬性，以及對設(shè)置參數(shù)時遇到的難題一一解答，希望能夠幫助你學(xué)習(xí)。