取代 marquee 的 jQuery plugin

在使用 跑馬燈 marquee 中引用 jQuery 傳入的內容時, 有時候顯示的文字會被截斷 (FireFox 跟 Chrome 比較明顯)
這時候就必須捨棄 marquee 的用法, 改用jQuery 其他的 plugin 來取代.

jQuery Scroller http://archive.plugins.jquery.com/project/jqScroller 倒是一個不錯的選擇


1. 建立一個 div 區塊, 在該區塊中填入想要顯示的文字內容

<div class="horizontal_scroller">
    <div class="scrollingtext">
       this is a scrolling text!
    </div>
</div>

2. 建立這個區塊的 css 

div.horizontal_scroller{
    position:relative;
    height:24px;
    width:500px;
    display:block;
    overflow:hidden;
    border:#CCCCCC 1px solid;
}

div.scrollingtext{
    position:absolute;
    white-space:nowrap;
    font-family:'Trebuchet MS',Arial;
    font-size:18px;
    font-weight:bold;
    color:#000000;
}

3. 加入 javascript 控制顯示的內容

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.Scroller-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
    $('.horizontal_scroller').SetScroller({ velocity:    60,
                                            direction:   'horizontal',
                                            startfrom:   'right',
                                            loop:        'infinite',
                                            movetype:    'linear',
                                            onmouseover: 'pause',
                                            onmouseout:  'play',
                                            onstartup:   'play',
                                            cursor:      'pointer'
                                        });
});

//-->
</script>

這樣就可以顯示跟 marquee 相同的效果了.

有關 jQuery Scroller 的控制參數如下:

velocity:       從 1 到 99                                  [預設為 50]                  
direction:      'horizontal' 或 'vertical'                  [預設為 'horizontal']
startfrom:      'left' 或 'right' 指定水平顯示的方向        [預設為 'right']
                    'top' 或 'bottom' 指定垂直顯示的方向    [預設為 'bottom']
loop:            從 1 到 n+, 或設為 'infinite'           [預設為 'infinite']
movetype:       'linear' 或 'pingpong'                      [預設為 'linear']
onmouseover:    'play' 或 'pause'                           [預設為 'pause']
onmouseout:     'play' 或 'pause'                           [預設為 'play']
onstartup:      'play' 或 'pause'                           [預設為 'play']
cursor:         'pointer' 或其他的 CSS 樣式 [預設為 'pointer']

其他的用法可以參考 http://www.vegabit.com/jquery_scroller/  這裡可以看到範例.
這一個 plugin 還可以用來顯示動畫移動的物體.