文本滾動元素 marquee 研究報告

本文我在 CSDN 也發表過，地址是： http://blog.csdn.net/shanelooli/article/details/7611942
一樣，在 ITeye 也發表過，地址是： http://surmounting.iteye.com/admin/blogs/1543868

不知道各位 JavaScript 開發者有沒有關注過 W3C 在中國的官方教學網站： http://www.w3school.com.cn/
此網站很是全面，而且內容也很完整豐富。不過今天不是廣告時間，由於我發現了一個 FireFox, Chrome, IE, Safari 都能支持的某 HTML 標籤，這個網站上居然沒有介紹！

那就是 <marquee>，多麼經常使用的文字滾動標籤啊～接下來是我對此元素的分析結果，經考察公網上常見資料，已經很全了。
把 marquee 元素放入 FireBug 中觀察，能夠看到以下幾個比較特別的屬性和方法。

標籤屬性
behavior    滾動方式，有三種支持的值。
    ="scroll"    按指定方向從空白開始滾動。一次滾動完畢後會追加空白，直至內容徹底滾掉，而後從頭開始第二次滾動，往復。
    ="slide"    按指定方向從空白開始滾動一次並中止
    ="alternate"    按指定方向滾動到頭後轉爲反向滾動，二種方向交替

direction    滾動方向，有二種支持的值。
    ="left"        從右往左滾動
    ="right"    從左往右滾動

loop        循環次數，必須爲數字。此屬性能令 behavior="slide" 的滾動成爲屢次。

scrollAmount    滾動每次跳動的像素。默認值各個瀏覽器彷佛不同。

scrollDelay    滾動每跳間隔的毫秒數。默認值各個瀏覽器彷佛不同。


自有事件句柄
onBounce（事件方法爲onbounce）    轉向事件，只在 behavior="alternate" 條件下才會激發。
onFinish（事件方法爲onfinish）    完成事件。指定 loop 或者 behavior="slide" 條件下會激發。
onStart（事件方法爲onstart）    開始事件。


內置方法
click()    含義還沒有可知……真抱歉了……
init()    初始化方法，但目前看來 Chrome, IE 和 Safari  認爲不具備此方法；FireFox 本身也無效果。
start()    啓動方法，能夠啓動自身中止滾動的對象。
stop()    中止方法，中止自身滾動。中止的滾動對象能夠經過 .start() 從新開始滾動。



技巧 實際使用中若是想重複循環，但不想經歷留白，能夠經過動態追加一組相同內容塊的方式解決此問題。 好比對於文字 <span id="a">1234567</span> ，應使用 alternate 方式開始，而後馬上轉爲 scroll 方式，並在這段文字後邊追加內容，變成 <span id="a">1234567</span> <span id="b">1234567</span> 。而後當自動滾動完 id="a" 的文字以後，刪除原有 id="a" 這段文字，在 id="b" 那段文字後邊再追加 id="a" 的新一段文本。以此可以實現文本永遠滾不完的效果。