網頁設計

關於網頁設計的技術或相關資訊分享

網頁文字跑馬燈(marquee)教學

文字跑馬燈網頁設計時,我們常常可以看到新聞或是最新活動,都會用跑馬燈的形式呈現,今天來教大家使用簡易的文字跑馬燈,這個跑馬燈也是使用jquery達成的,使用上非常的簡易,效果也很不錯。

外掛基本資料

外掛名稱:jquery.totemticker.js

版本:1.0

作者網站:點我連結

下載連結:jquery.totemticker.js

引用檔案: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都是往一樣的方向滾。)

這樣就完成了非常簡單好用的文字跑馬燈,在新聞公佈的時候非常的實用。

Please enable the javascript to submit this form