JQUERY插件-jQuery.Marquee文字跑馬燈插件


原文地址: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

在線預覽 網盤下載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM