jQuery常用插件大全（7）kxbdMarquee?

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

本經驗分享如何使用 jQuery kxbdMarquee 無縫滾動實現走馬燈效果。

工具/原料

筆記本 電腦或是臺式機

互聯網

jQuery kxbdMarquee 無縫滾動插件

方法/步驟

下載jQuery kxbdMarquee 無縫滾動插件

（1）解壓文件，將jquery.kxbdmarquee.js文件拷貝進項目文件夾

（2）載入 JavaScript 文件

（3）DOM 結構

• ...
• ...
• ...

（4）CSS 樣式

/**

* 父容器需要設置溢出隱藏

* 如果是水平滾動，項目需要設置浮動

*/

#element_id{overflow:hidden;}

#element_id ul li{float:left;}

（5）JavaScript 調用方式

$('#element_id').kxbdMarquee();

參數說明，如下圖所示。

• 
• 
• 
• 
• 
• 
• 
• 

• 新聞公告一
• 新聞公告二新聞公告二新聞公告二新聞公告二
• 新聞公告三新聞公告三
• 新聞公告四新聞公告四新聞公告四
• 新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五
• 新聞公告六新聞公告六新聞公告六

• 
• 
• 
• 
• 
• 
• 
• 

• 新聞公告一新聞公告一
• 新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二
• 新聞公告三新聞公告三新聞公告三新聞公告三
• 新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四
• 新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五
• 新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六

橫向滾動 (right)，效果如下圖所示。

橫向滾動 (left)，效果如下圖所示。

縱向滾動 (bottom)，效果如下圖所示。

縱向滾動 (top)，效果如下圖所示。

注意事項

該插件使用JavaScript 來模擬該效果的插件，可以避免 標籤在IE以外瀏覽器不兼容的問題

該插件依賴JQuery，需要引入JQuery庫