jQuery文字跑馬燈插件Marquee

拉丁傳說 2018-9-11 614

在頁面中引入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。
  • speedspeed參數會覆蓋duration
  • gap:tickers之間的間隙。單位像素,默認為20。
  • pauseOnHover:在hover時暫停跑馬燈。
  • pauseOnCycle:在循環結束,暫停跑馬燈delayBeforeStart毫秒。
  • startVisible:跑馬燈在開始時是否可見。

 該jQuery跑馬燈插件的github地址為:https://github.com/aamirafridi/jQuery.Marquee

http://down.htmleaf.com/1809/201809031509.zip

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将