一款經典的jQuery kxbdMarquee 無縫滾動插件


<marquee> 曾是 IE 下獨有的一個走馬燈效果的標簽,其他瀏覽器並不兼容,於是出現了使用 JavaScript 來模擬該效果的插件。

  • 版本:
  • jQuery v1.3.2+

在線實例

實例預覽 kxbdMarquee 模擬 Marquee 無縫滾動

使用方法

載入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.kxbdmarquee.js"></script> 
復制

CSS 樣式

  1. /** 
  2.  * 父容器需要設置溢出隱藏 
  3.  * 如果是水平滾動,項目需要設置浮動 
  4.  */ 
  5. #element_id{overflow:hidden;} 
  6. #element_id ul li{float:left;} 
復制

DOM 結構

  1. <div id="element_id"> 
  2.   <ul> 
  3.     <li>...</li> 
  4.     <li>...</li> 
  5.     <li>...</li> 
  6.   </ul> 
  7. </div>
復制

JavaScript 調用方式

  1. $('#element_id').kxbdMarquee();
復制

參數說明

名稱 默認值 說明
direction "left" 滾動方向。可設置為:"left", "right", "up", "down"
isEqual true 所有滾動的元素長寬是否相等。可設置為:true, false
loop 0 循環滾動次數,0 表示無限循環
scrollAmount 1 步長(px)
scrollDelay 20 時長(ms)

 


免責聲明!

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



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