jQuery.Marquee

jQuery.Marquee是一款jQuery文字跑馬燈插件。jQuery.Marquee跑馬燈插件可以結合使用CSS3動畫，制作文字的上下左右移動效果。

使用方法
在頁面中引入jquery和jquery.marquee.js文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.marquee.js" type="text/javascript"></script>

如果需要跑馬燈的暫停效果，引入jquery.marquee.js文件。

<script src="js/jquery.pause.js" type="text/javascript"></script>

如果需要使用easing動畫效果，引入jquery.easing.js文件。

<script src="js/jquery.easing.min.js" type="text/javascript"></script>

使用一個塊級元素作為跑馬燈的容器。

<div id="container">跑馬燈文字</div>

在頁面DOM元素加載完畢之后，通過marquee()方法來初始化該插件。一共有三個可選參數，一個回調方法。

$(dom).marquee(options, callback);

options 可選參數：
options : {
    direction : 'top',
    pixels : 5,
    speed : 30,
}
direction

移動方向：
    左：left
    右：right
    上：top
    下：bottom；
pixels

每次移動的像素數
speed

兩次移動之前的間隔時間數（毫秒）
調用方法如下：

$("scroll-a").marquee();
 
$("scroll-b").marquee({direction:'top'});

$("scroll-c").marquee({direction:'right',pixels:2,speed:30});
 
$("scroll-d").marquee({direction:"bottom",pixels:2,speed:30}, function(){
    console.log("執行了一次");
});

 

$(function(){
$('.marquee').marquee();
});

 

該跑馬燈插件的可用配置參數有：

allowCss3Support ：如果瀏覽器支持CSS3動畫，則使用CSS3動畫。默認為true。
css3easing：CSS3 easing效果，默認為'linear'。
easing：jquery easing效果，默認為'linear'。
delayBeforeStart：開始動畫的延遲時候，單位毫秒，默認為1000。
direction：跑馬燈動畫的方向。默認為left。
duplicated：是否復制文本。默認為false。
duration：動畫的持續時間，單位毫秒，默認為5000。
speed：speed參數會覆蓋duration。
gap：tickers之間的間隙。單位像素，默認為20。
pauseOnHover：在hover時暫停跑馬燈。
pauseOnCycle：在循環結束，暫停跑馬燈delayBeforeStart毫秒。
startVisible：跑馬燈在開始時是否可見。