網(wǎng)站制作

文字走馬燈置頂顯示

更新時(shí)間：2025-01-11 14:53:37

應(yīng)用css實(shí)現(xiàn)走馬燈置頂顯示

超出顯示

用到命令 text-overflow ： clip | ellipsis 文本超出：截?cái)鄚省略

但這一條命令是看不到效果的，需要另外兩條命令配合使用，讓文本能夠溢出，第一個(gè)是強(qiáng)制一行內(nèi)顯示，white-space:nowrap；第二個(gè)是溢出內(nèi)容隱藏,overflow:hidden

超出跑馬等效果

老的前端開發(fā)人員對(duì)于marquee標(biāo)簽肯定不陌生，一個(gè)被淘汰的標(biāo)簽，被剛?cè)腴T的新手所喜愛，因?yàn)槟芡ㄟ^(guò)一個(gè)簡(jiǎn)單的標(biāo)簽做出動(dòng)態(tài)的效果。但是在實(shí)際應(yīng)用上的局限性和效果的過(guò)時(shí)，使這個(gè)標(biāo)簽退出歷史舞臺(tái)，大家紛紛改用js來(lái)實(shí)現(xiàn)無(wú)間斷滾動(dòng)等效果。

新的CSS3 marquee設(shè)置，可以說(shuō)功能強(qiáng)大了很多，更加易操作，用簡(jiǎn)單的代碼解決了js中比較糾結(jié)的字符長(zhǎng)度判斷等難題。強(qiáng)烈推薦大家使用。

對(duì)于這個(gè)屬性的定義，W3C標(biāo)準(zhǔn)用法和webkit內(nèi)核瀏覽器的支持用法并不相同，由于我們立足實(shí)戰(zhàn)實(shí)用，所以這里只介紹好用的。可用的。

我們需要四句常用命令

overflow:-webkit-marquee;//指定溢出時(shí)滾動(dòng)。

-webkit-marquee-style:scroll | slide | alternate; //跑馬燈樣式，分三種。

scroll，從一端滾動(dòng)到另一端，內(nèi)容完全滾入（消失）時(shí)重新開始。slide，從一端滾到另一端，內(nèi)容接觸到另一端后，立馬重新開始。alternate，內(nèi)容不跑到顯示區(qū)域外，在里面來(lái)回碰壁反彈。這里主要用第一種。

-webkit-marquee-repetition:infinite | number;// 跑馬燈跑的次數(shù)，infinite 為無(wú)限多次，不結(jié)束?；蛘呖梢杂谜麛?shù)設(shè)置滾動(dòng)的次數(shù)。

-webkit-marquee-direction:up | down | left | right; //跑動(dòng)的方向，這個(gè)要注意結(jié)合實(shí)際情況，即實(shí)際你操作的標(biāo)簽文本流溢出在哪個(gè)方向溢出。

-webkit-marquee-speed:slow | normal | fast;//跑動(dòng)的速度設(shè)置。

標(biāo)簽：文字走馬燈置頂顯示