超連結網頁跑馬燈設計

超連結網頁跑馬燈是將網頁超連結的特性結合跑馬燈的語法所做出來的效果，超連結網頁跑馬燈是一種非常實用的網頁特效，常見於一些網頁公告、特價資訊的說明，感覺就像是會動的超連結，當展示大量資訊時，最好能結合《滑鼠移入就停止的網頁跑馬燈設計》的效果，讓超連結跑馬燈更符合一般網友使用的習慣，接著我們就先來研究超連結跑馬燈的設計技巧。

超連結網頁跑馬燈設計範例一、左右跑動的超連結跑馬燈
範例的輸出結果範例中的跑馬燈就與一般會左右跑動的跑馬燈一樣，只是多了超連結的效果，重點就在 a href 的那一行，可以設定超連結的各種屬性，而跑馬燈要怎麼跑則是根據 HTML 的 marquee 標籤設定，關於網頁跑馬燈的設計完整介紹請參閱《如何設計網頁跑馬燈》篇的說明。

超連結網頁跑馬燈設計範例二、向上跑動的超連結跑馬燈
範例輸出結果範例二的跑馬燈是拿範例一的來修改，我們把 behavior 取消，讓超連結跑馬燈維持同一的方向持續的跑動，並把跑馬燈區塊的高度調整為 80px，方向則改為向上（direction="up"），這樣就能創造出向上跑動的超連結跑馬燈囉！

修改跑馬燈的其他方向或跑法，請參閱：如何設計網頁跑馬燈。

更多網頁跑馬燈設計
分享於 2014-10-16