網頁設計時，我們常常可以看到新聞或是最新活動，都會用跑馬燈的形式呈現，今天來教大家使用簡易的文字跑馬燈，這個跑馬燈也是使用jquery達成的，使用上非常的簡易，效果也很不錯。
外掛基本資料
外掛名稱：jquery.totemticker.js
版本：1.0
作者網站：點我連結
引用檔案：jquery 1.6.2
範例：
不囉嗦先看範例
將滑鼠移到跑馬燈上，可暫停跑馬燈。
使用方法：
先載入需要的js及css檔
<script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.totemticker.min.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
接著呼叫javascript對應的函數
<script type="text/javascript">
// <![CDATA[
$(function() {
$('#vertical-ticker').totemticker({
next: '#ticker-next',
previous: '#ticker-previous',
stop: '#stop',
start: '#start',
row_height: '50px',
speed: '800',
interval: '4000',
max_items: 'null',
mousestop: true
});
});
// ]]>
</script>
接著就是Html的部分了
<ul id="vertical-ticker">
<li><a href="https://www.tellustek.com" target="_blank">網頁設計找蓋婭科技</a></li>
<li><a href="https://www.tellustek.com" target="_blank">網路行銷也找蓋婭科技</a></li>
<li><a href="https://www.tellustek.com" target="_blank">網路開店還是找蓋婭科技</a></li>
<li><a href="https://www.tellustek.com" target="_blank">找蓋婭科技是您最佳的選擇</a></li>
</ul>
<p><a href="#" id="ticker-previous">前一個</a> / <a href="#" id="ticker-next">下一個</a> / <a id="stop" href="#">停止</a> / <a id="start" href="#">開始</a></p>
這邊要注意的是ul的ID 還有如果要設定前一個、下一個、停止、開始等操作選項的話，對應的ID都要根據剛剛的javascript設定好。
參數說明：
這個外掛有不少參數可以設定，使用的方法只要在<a>標籤中的rel屬性加上對應的參數就可以了，下面是參數列表，注意參數都不需要加單位，不然會發生錯誤。
| 參數 | 說明 (from V1.0.0) |
|---|---|
| previous | 前一個按鈕的css ID名稱，寫法#ID名稱，如果沒有的話就設定null |
| next | 後一個按鈕的css ID名稱，寫法#ID名稱，如果沒有的話就設定null |
| start | 開始按鈕的css ID名稱，寫法#ID名稱，如果沒有的話就設定null |
| stop | 停止按鈕的css ID名稱，寫法#ID名稱，如果沒有的話就設定null |
| row_height | 一列的高度，單位是px，寫法：50px |
| speed | 跑馬燈滾動動畫的時間，單位是毫秒，寫的時候不需要加單位，例如800 |
| interval | 滾動的間隔時間，單位是毫秒，寫的時候不需要加單位，例如2000，表示2秒鐘會滾動一次 |
| max_items | 同時顯示幾項。直接輸入正整數，例如：3 |
| mousestop | 當滑鼠在跑馬燈上時，是否暫停滾動，參數：true / false |
| direction | 跑馬燈的方向，填up / down (註：小編這個參數不管設定up或down都是往一樣的方向滾。) |
這樣就完成了非常簡單好用的文字跑馬燈，在新聞公佈的時候非常的實用。