常見的文字滾動效果實現(xiàn)

在早期的網(wǎng)頁中，大家是否見過一種網(wǎng)頁中的廣告，它會在網(wǎng)頁里來回移動。又或是像今天這種互聯(lián)網(wǎng)十分發(fā)達的時代，網(wǎng)頁中經(jīng)常會出現(xiàn)在固定的位置來回滾動播報的新聞標題，網(wǎng)站公告。

這些，都是文字滾動效果在實際網(wǎng)頁設計中的應用。那么我們學習網(wǎng)頁設計，自然是不可跳過這一環(huán)節(jié)，今天這個小節(jié)的知識點，老師將帶領同學們來了解一下，文字滾動實現(xiàn)的原理，如何去控制文字滾動，以及在 Dreamweaver CC 2018 中實踐文字滾動效果。

這一節(jié)的知識點，不算很難，但應用性還是不低的，希望同學們學習后，能夠應用在自己設計的網(wǎng)頁中去。下面就請跟隨老師的介紹來開始今天的學習吧！

1. 網(wǎng)頁中文字滾動實現(xiàn)原理

1.1文字滾動的意義

網(wǎng)頁中使用文字滾動，相對于早期 WEB1.0 時代的網(wǎng)頁，是具有里程碑的意義的。首先，HTML 作為網(wǎng)頁內容的載體，在早期大部分都由靜態(tài)元素構成。這就造成了網(wǎng)頁的主次，或者叫關鍵信息概念十分模糊，難于查找。

后來，網(wǎng)頁中出現(xiàn)了文字滾動這種在效果上接近動態(tài)的設計。人們在首次加載網(wǎng)頁的時候能夠被這部分會動的的信息所吸引，大大提高了網(wǎng)站中網(wǎng)頁的用戶友好度。

也為后來的一些用戶交互提供了思維上的參考。其次，初期的網(wǎng)站，在尋找配套商業(yè)模式的時候也遇到了變現(xiàn)困難的煩惱。如何利用廣告變現(xiàn)成為了大眾開發(fā)者最開始的煩惱。后來他們想到了用滾動效果來引起用戶的注意，從而實現(xiàn)了廣告的價值，也對開發(fā)者收獲經(jīng)濟價值起到了一定的作用。

因此，就像今天學習文字滾動一樣，同學們以后如果深入學習 js 等語言的時候可能還會學習到更多的諸如圖片滾動，輪播等動態(tài)效果，萬丈高樓平地起，今天的知識點對以后的學習將是一個借鑒和參考。

1.2 HTML 文字滾動標簽

如果在含有文字滾動的網(wǎng)頁中查看過源碼的同學們應該見過這個標簽。 marquee 標簽。它是一個標準的 HTML 標簽。也是成對出現(xiàn)的。很多人將其文字滾動效果稱為跑馬燈或走馬燈。HTML 很早就加入了跑馬燈效果，以至于在早期的純靜態(tài)網(wǎng)頁中就可以看到相關的實踐與應用。

從語法角度講，在一組成對出現(xiàn)的 HTML marquee 標簽中間的文字，就會被設置為滾動效果。

說起滾動，這里就要引導同學們思考一個問題：滾動可能的屬性有哪些？

在這里統(tǒng)一回答一下，首先，滾動肯定不是只能一個方向滾動的，W3C 標準組織根據(jù)我們人類的視覺習慣，習慣上將滾動方向分為兩個方向，也就是我們都能想到的左右滾動方向，和上下滾動方向。

其次，滾動如果可以隨便滾動，那么是不是會覆蓋到其他元素，導致文字重疊，反而降低了網(wǎng)站的實際觀感？當然不能這樣設置，因此，W3C 標準組織在設計之初，就為 marquee 這個 HTML 元素提供了 width 和 height 屬性，讓元素只能在我們規(guī)定的一塊區(qū)域里滾動。

然后，既然是動，物理好的同學或許會考慮到：文字動的速度怎么辦？ Good Job！真是個好問題！

這個問題不用我們操心，因為 W3C 組織在制定標準的時候，還提供了一個設置滾動速度的 scrollamount 屬性。

那么這些具體如何控制我們在本小節(jié)下一個知識點中會介紹，此處只作思維發(fā)散性的引導。

2. 如何控制文字滾動

跟隨上一個知識點中講述的內容，我們具體來看一下 marquee 如何使用。

首先是文字滾動的方向如何控制？

這里面我們只需要控制 marquee 標簽的 direction 屬性。這個屬性提供四個值 up down left right，分別對應文字滾動效果：向上，向下，向左，向右滾動。是不是很簡單？

然后滾動速度怎么去控制？

這里面我們只需控制 marquee 標簽的 scrollamount 屬性，控制的規(guī)律是數(shù)值越小越慢，反之則越來越快。那么這里老師要傳授給大家一個實際工作的經(jīng)驗，那就是一般將這個屬性的值設置為 5-10 時比較適合我們肉眼觀看的。

3. 在 Dreamweaver CC 2018 中為文字設置滾動效果

首先，我們還是老規(guī)矩，先建立一個空白的 HTML 文檔。由于 Dreamweaver CC 2018 具有很好的代碼提示功能。因此我們只需要在 body 中自己想要插入走馬燈的位置插入一對 marquee 標簽即可，比如下面的圖片中，設置了一個典型的 marquee 走馬燈文字滾動效果。

我們可以在一組對比圖中明顯的看到，由于我們設置了 width 和 height 屬性，走馬燈文字滾動效果的顯示范圍被限制在了相關區(qū)域內。

并且我們設置了文字的滾動方向時從左向右。更多屬性，同學們可以查閱 W3C 的官方標準文檔。

4. 小結

在本節(jié)知識點中，我們主要向大家講解了網(wǎng)頁設計中文字滾動效果的設計初衷和實踐意義。這一部分需要大家能夠理解為什么要使用文字滾動效果，以及文字滾動效果在今天的實踐意義。

然后我們向大家介紹了 HTML 中與文字滾動效果有關的原生標簽 marquee 標簽，以及它的一些重要的屬性。在這里大家要理解文字滾動中滾動兩個字的含義，和其背后可能蘊藏的原理。

這為我們能夠在今后的實際網(wǎng)頁設計中能靈活巧妙地選擇 marquee 標簽的屬性設置具有非常關鍵的作用。希望大家能夠體會每一個關鍵屬性，并且可以在課下自己多多嘗試，體會諸如速度，方向等屬性設置的效果。

本節(jié)知識點的難點是：理解文字滾動效果在網(wǎng)頁設計中的重要性，理解 marquee 標簽滾動屬性的含義，并能夠靈活設置和選用。

本節(jié)知識點的重點是：在 Dreamweaver CC 2018 中設置走馬燈文字滾動效果。