jquery.scrollbox.js

這是一個 jQuery 的 plugin，用來做文字或圖片的捲動效果。

下載

您可以透過 Google Code Poject 取得最新原始碼。

使用範例

先來看看最典型的使用範例，可以用來顯示新聞、新訊息的跑馬燈效果。

HTML

<div id="demo1">
  <ul>
    <li>新體驗！國際買家服務</li>
    <li>秋季新裝大促銷活動</li>
    <li>數位3C商品全面3折起</li>
    <li>生活精品熱賣活動開跑</li>
    <li>全新首頁新年新登場</li>
    <li>百搭外套1折！限今日</li>
  </ul>
</div>

HTML 使用 div > ul > li 這樣的架構即可

CSS

<style type="text/css">
#demo1 {
  border: 1px solid red;
  width: 180px;
  height: 3.6em;
  overflow: hidden;
}
#demo1 ul {
  width: 500px;
  height: 100px;
  overflow: hidden;
  margin: 0;
}
#demo1 ul li {
  height: 1.2em;
}
</style>

CSS 的部份要特別注意幾點：

1. div 一定要給特定的寬和高，並且指定 overflow: hidden
2. ul 一定要比 div 大，以垂直捲動，一次捲動一個項目為例，ul 至少要比 div 高一個項目的高度才行
3. li 最好要控制為特定高度，這樣 div 的高度比較好抓，否則會出現多一點點的情況。以這個範例來說，div 的高度剛好為 li 的 3 倍，因此一次可以看到 3 個項目
4. 實際的項目內容一定要比顯示的多，這樣才有辦法捲動，以這個範例來說，一次顯示 3 個，而總共有 6 個項目。

JavaScript

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollbox.js"></script>
<script type="text/javascript">
$(function() {
  $('#demo1').scrollbox();
});
</script>

JavaScript 要引用 jQuery 及這個 Plugin，然後在 dom ready 事件內，選定特定物件並套用 scrollbox() 即可

待續...

一次寫不完，還有多種使用範例和設定值，敬請期待....