說明:`kxbdSuperMarquee.js`可謂是一個滾動的神器,關于滾動的什么效果都可以實現,文字的滾動,圖片的滾動,輪播圖,向上、向下、向左、向右都可以實現。只要用好了它,幾本上什么滾動都不會愁的。下面我介紹最常用的,至于很多其他效果以后有時候都會跟帖的。
>兼容瀏覽器:IE6+/Firefox/Google Chrome
官方鏈接:www.kxbd.com(現已無法訪問)
作者:@author Aken Li(www.kxbd.com)
JS下載:http://www.ijquery.cn/study/demo/kxbdSuperMarquee/kxbdSuperMarquee.js
本站地址:
http://www.ijquery.cn/study/demo/kxbdSuperMarquee/index.html
# JS代碼:
```
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="kxbdSuperMarquee"></script>
<script type="text/javascript">
$(function(){
$(‘#marquee’).kxbdSuperMarquee({
isMarquee:true,
isEqual:false,
scrollDelay:20,
controlBtn:{up:’#goUM’,down:’#goDM’},
direction:’up’
});
});
</script>
```
## HTML代碼:
```
<h2>無縫上下文字滾動 支持左右無縫滾動</h2>
<div id="marquee">
<ul>
<li><a href="#" title="">jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</a></li>
<li><a href="#" title="">制作CSS3和HTML5的一個單頁網站模板</a></li>
<li><a href="#" title="">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
<li><a href="#" title="">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
<li><a href="#" title="">用div+css制作純CSS下拉菜單,兼容IE6 IE7 IE8及以上 Firefox</a></li>
<li><a href="#" title="">CSS如何定位工程</a></li>
<li><a href="#" title="">jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</a></li>
<li><a href="#" title="">制作CSS3和HTML5的一個單頁網站模板</a></li>
<li><a href="#" title="">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
<li><a href="#" title="">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
<li><a href="#" title="">用div+css制作純CSS下拉菜單,兼容IE6 IE7 IE8及以上 Firefox</a></li>
<li><a href="#" title="">CSS如何定位工程</a></li>
</ul>
</div>
<div>↑鼠標按住:<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div>
```
## CSS代碼
```
#marquee{width:600px;height:200px; overflow:hidden;background:#EFEFEF;margin:0 auto;}
#marquee ul li{padding:0 10px;line-height:24px;height:24px;overflow:hidden;text-align:left;font-size:12px;}
/* control */
.control{height:24px;line-height:24px;overflow:hidden;padding:15px 0 0 0;}
```
# 參數說明:
```
distance:200,//一次滾動的距離
duration:20,//緩動效果,單次移動時間,越小速度越快,為0時無緩動效果
time:5,//停頓時間,單位為秒
direction: 'left',//滾動方向,'left','right','up','down'
scrollAmount:1,//步長
scrollDelay:20//時長,單位為毫秒
isEqual:true,//所有滾動的元素長寬是否相等,true,false
loop: 0,//循環滾動次數,0時無限
btnGo:{left:'#goL',right:'#goR'},//控制方向的按鈕ID,有四個屬性left,right,up,down分別對應四個方向
eventGo:'click',//鼠標事件
controlBtn:{left:'#goL',right:'#goR'},//控制加速滾動的按鈕ID,有四個屬性left,right,up,down分別對應四個方向
newAmount:4,//加速滾動的步長
eventA:'mouseenter',//鼠標事件,加速
eventB:'mouseleave',//鼠標事件,原速
navId:'#marqueeNav', //導航容器ID,導航DOM:<ul><li>1</li><li>2</li><ul>,導航CSS:.navOn
eventNav:'click' //導航事件
```