原文地址:http://www.bluestep.cc/jquery%E6%8F%92%E4%BB%B6-jquery-marquee%E6%96%87%E5%AD%97%E8%B7%91%E9%A9%AC%E7%81%AF%E6%8F%92%E4%BB%B6/
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>
HTML結構
使用一個塊級元素作為跑馬燈的容器。
<div id="container">跑馬燈文字</div>
初始化插件
在頁面DOM元素加載完畢之后,通過marquee()方法來初始化該插件。
$(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:跑馬燈在開始時是否可見。
源碼地址:https://github.com/aamirafridi/jQuery.Marquee