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

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

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

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

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

1.1文字滾動的意義

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

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

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

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

1.2 HTML 文字滾動標(biāo)簽

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

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

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

在這里統(tǒng)一回答一下，首先，滾動肯定不是只能一個方向滾動的，W3C 標(biāo)準(zhǔn)組織根據(jù)我們?nèi)祟惖囊曈X習(xí)慣，習(xí)慣上將滾動方向分為兩個方向，也就是我們都能想到的左右滾動方向，和上下滾動方向。

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

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

這個問題不用我們操心，因為 W3C 組織在制定標(biāo)準(zhǔn)的時候，還提供了一個設(shè)置滾動速度的 scrollamount 屬性。

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

2. 如何控制文字滾動

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

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

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

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

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

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

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

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

并且我們設(shè)置了文字的滾動方向時從左向右。更多屬性，同學(xué)們可以查閱 W3C 的官方標(biāo)準(zhǔn)文檔。

4. 小結(jié)

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

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

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

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

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