網(wǎng)站制作NEWS
文字走馬燈 置頂顯示
應(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的新手所喜愛(ài)，因?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è)置。
多重隨機(jī)標(biāo)簽