*{margin:0;padding:0;}
body{font-size:12px;}
a{color:#333;}
ul{list-style:none;}
#marquee1{position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
#marquee1 ul li{float:left; padding:0 1px;}
#marquee1 ul li img{display:block;}
#marquee2{position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#EFEFEF;}
#marquee2 ul li{float:left; padding:0 10px; line-height:25px;}
#marquee3{position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}
#marquee3 ul li{float:left; padding:1px 0;}
#marquee3 ul li img{display:block;}
#marquee4{position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
#marquee4 ul li{float:left; width:180px; padding:10px; line-height:20px;}
(function(){
$("#marquee1").kxbdMarquee({direction:"right"});
$("#marquee2").kxbdMarquee({isEqual:false});
$("#marquee3").kxbdMarquee({direction:"down"});
$("#marquee4").kxbdMarquee({direction:"up",isEqual:false});
})();
橫向滾動 (right),效果如下圖所示。
橫向滾動 (left),效果如下圖所示。
縱向滾動 (bottom),效果如下圖所示。
縱向滾動 (top),效果如下圖所示。
注意事項
該插件使用JavaScript 來模擬該效果的插件,可以避免 標籤在IE以外瀏覽器不兼容的問題
該插件依賴JQuery,需要引入JQuery庫