在沒有MARQUEE的情況下在HTML5和CSS3中創建可滾動內容

那些長期寫HTML的人可能會記住這個元素。 這是一個瀏覽器特定的元素,它在屏幕上創建了滾動文本的橫幅。 這個元素從來沒有被添加到HTML規範中,並且它在各種瀏覽器中的支持各不相同。 人們經常對使用這種元素有非常強烈的意見 - 無論是正面的還是負面的。 但是,無論您是喜歡還是討厭它,它的確有助於讓內容溢出盒邊界。

除了強烈的個人觀點之外,瀏覽器從未完全實現的部分原因是它被視為視覺效果,因此它不應該由定義結構的HTML定義。 相反,視覺效果或演示效果應該由CSS來管理。 CSS3添加了選取框模塊來控制瀏覽器如何將元素添加到選取框效果 。

新的CSS3屬性

CSS3增加了五個新的屬性來幫助控制你的內容在字幕中的顯示方式:溢出風格,字幕風格,字幕播放計數,字幕方向和字幕速度。

溢流式
overflow-style屬性(我在文章CSS溢出中也討論過)定義了溢出內容框的內容的首選樣式。 如果將值設置為選取框或選取框,則您的內容將滑入和滑出左側/右側(選框行)或上/下(選取框塊)。

帳篷式
這個屬性定義了內容將如何進入視圖(和視圖)。

選項是滾動,幻燈片和備用。 滾動從內容完全離開屏幕開始,然後移動到可見區域,直到它再次完全離開屏幕。 幻燈片從完全離開屏幕的內容開始,然後移動到內容完全移動到屏幕上,並且沒有更多內容可以在屏幕上滑動。

最後,交替地將內容從一邊反彈到另一邊,來回滑動。

字幕播放計數
使用MARQUEE元素的一個缺點是選取框從不停止。 但是,通過樣式屬性選取框,您可以設置選取框以將內容打開和關閉特定次數。

選取框方向
您也可以選擇內容在屏幕上滾動的方向。 正向和反向值基於文本的方向性,當溢出風格為矩形框時,以及當溢出風格為矩形框時向上或向下。

選取方向詳情

溢流式 語言指導 前鋒 相反
選取框線 LTR 剩下 對
RTL 對 剩下
選取框塊 向上 下

選取框速度
此屬性決定內容在屏幕上滾動的速度。 這些值是緩慢的,正常的和快速的。 實際速度取決於顯示內容和瀏覽器,但值必須慢於正常速度,慢於快速。

瀏覽器支持選取屬性

您可能需要使用供應商前綴才能使CSS選取框元素正常工作。 他們如下:

CSS3 供應商前綴
overflow-x:marquee-line; overflow-x:-webkit-marquee;
帳篷式 -webkit-帳篷式
字幕播放計數 -webkit-選取框重複
選框方向:正向|反向; -webkit-marquee-direction:forwards | backwards;
選取框速度 -webkit-選取框速
沒有相同的 -webkit-選取框增量

最後一個屬性允許您定義在內容在選取框中滾動屏幕時步驟應該多大或多小。

為了讓你的選取框工作,你應該首先放置供應商前綴值,然後用CSS3規範值跟隨它們。 例如,這裡是一個選取框的CSS,它在200x50框內從左向右滾動文本五次。

{
寬度:200px; height:50px; 白色空間:nowrap;
溢出:隱藏;
溢出 - X:-webkit-選取框;
-webkit-marquee-direction:forwards;
-webkit-marquee-style:scroll;
-webkit-marquee-speed:normal;
-webkit-marquee-increment:small;
-webkit-marquee-repetition:5;
overflow-x:marquee-line;
方向盤:向前;
選框式:滾動;
字幕速度:正常;
字幕播放次數:5;
}