jQuery插件jquery.kxbdmarquee.js實現(xiàn)無縫滾動效果
更新時間：2017年02月15日 09:17:00 作者：erdouzhang
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery.kxbdmarquee.js無縫滾動的具體代碼，供大家參考，具體內(nèi)容如下
strep1.頁面引入相關(guān)文件
<script src="lib/jquery/jquery.js"></script> <script src="lib/jquery/jquery.kxbdmarquee.js"></script>
step2.寫html結(jié)構(gòu)、css樣式、js
css樣式：
html結(jié)構(gòu)：
js效果：
<head>
<meta charset="UTF-8">
<title>滾動輪播</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
a{color:#333;}
ul{list-style:none;}
#demo1{position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
#demo1 ul li{float:left; padding:0 1px;}
#demo1 ul li img{display:block;}
#demo2{position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#ff6633;}
#demo2 ul li{float:left; padding:0 10px; line-height:25px;}
#demo3{position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}
#demo3 ul li{float:left; padding:1px 0;}
#demo3 ul li img{display:block;}
#demo4{position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
#demo4 ul li{float:left; width:180px; padding:10px; line-height:20px;}
</style>
</head>
<body>
<div id="demo1">
<ul>
<li><img src="img/01s.jpg" width="60" height="45"></li>
<li><img src="img/02s.jpg" width="60" height="45"></li>
<li><img src="img/03s.jpg" width="60" height="45"></li>
<li><img src="img/04s.jpg" width="60" height="45"></li>
<li><img src="img/05s.jpg" width="60" height="45"></li>
<li><img src="img/06s.jpg" width="60" height="45"></li>
<li><img src="img/07s.jpg" width="60" height="45"></li>
<li><img src="img/08s.jpg" width="60" height="45"></li>
</ul>
</div>
<div id="demo2">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告二新聞公告二新聞公告二新聞公告二</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告三新聞公告三</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告四新聞公告四新聞公告四</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告六新聞公告六新聞公告六</a></li>
</ul>
</div>
<div id="demo3">
<ul>
<li><img src="img/01s.jpg" width="60" height="45"></li>
<li><img src="img/02s.jpg" width="60" height="45"></li>
<li><img src="img/03s.jpg" width="60" height="45"></li>
<li><img src="img/04s.jpg" width="60" height="45"></li>
<li><img src="img/05s.jpg" width="60" height="45"></li>
<li><img src="img/06s.jpg" width="60" height="45"></li>
<li><img src="img/07s.jpg" width="60" height="45"></li>
<li><img src="img/08s.jpg" width="60" height="45"></li>
</ul>
</div>
<div id="demo4">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告一新聞公告一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告三新聞公告三新聞公告三新聞公告三</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六</a></li>
</ul>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/jquery/jquery.kxbdmarquee.js"></script>
<script>
(function(){
$("#demo1").kxbdMarquee({direction:"right"});
$("#demo2").kxbdMarquee({isEqual:false});
$("#demo3").kxbdMarquee({direction:"down"});
$("#demo4").kxbdMarquee({direction:"up",isEqual:false});
})();
</script>
</body>
效果圖：
注意：
CSS 樣式
/**
* 父容器需要設(shè)置溢出隱藏
* 如果是水平滾動，項目需要設(shè)置浮動
*/
#demo {overflow:hidden;}
#demo ul li {float:left;}
參數(shù)說明
代碼：https://github.com/erdouzhang/jquery.kxbdmarquee.js
在線演示：https://erdouzhang.github.io/jquery.kxbdmarquee.js/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Jquery樹插件zTree實現(xiàn)菜單樹，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery實現(xiàn)移動端手機(jī)商城購物車功能
這篇文章主要介紹了jQuery實現(xiàn)移動端手機(jī)商城購物車功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
為jquery.ui.dialog 增加“自動記住關(guān)閉時的位置”的功能
筆者在項目中使用 jquery.ui.dialog 1.7.2時，當(dāng)使用$("#d").dialog("open");時，dialog總是彈出在option中指定的位置；2009-11-11
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
基于JQuery實現(xiàn)圖片上傳預(yù)覽與刪除操作
這篇文章主要為大家詳細(xì)介紹了基于JQuery實現(xiàn)圖片上傳預(yù)覽與刪除操作的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
Jquery EasyUI中彈出確認(rèn)對話框以及加載效果示例代碼
本篇文章主要是對Jquery EasyUI中彈出確認(rèn)對話框以及加載效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
基于jquery的內(nèi)容循環(huán)滾動小模塊（仿新浪微博未登錄首頁滾動微博顯示）
新浪微博未登錄首頁有一個“大家正在說”的模塊，動態(tài)滾動最新發(fā)布的微博。2011-03-03
這篇文章主要介紹了jQuery實現(xiàn)的頁面詳情展開收起功能,涉及jQuery事件綁定及頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
chosen實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì) 介紹了chosen實現(xiàn)省市區(qū)三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08