网址链接：http://www.ijquery.cn/?p=240
-
效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>第58款插件：kxbdSuperMarquee.js滚动的神器</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./gundong.js"></script>
<script type="text/javascript">
$(function(){
$('#marquee').kxbdSuperMarquee({
isMarquee:true,
isEqual:false,
scrollDelay:20,
controlBtn:{up:'#goUM',down:'#goDM'},
direction:'up'
});
});
</script>
<style type="text/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;}
</style>
</head>
<body>
<div id="header">
<h1>第58款插件：kxbdSuperMarquee.js滚动的神器</h1>
</div>
<div class="container">
<div id="container" style="margin:0 auto;text-align:center;">
<!--start -->
<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 class="control">↑鼠标按住：<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div>
<!--end-->
<br/><br/>
更多示例,<a href="moredemo.html">请点击</a>
</div>
</div>
<div id="footer"></div>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=19799522" charset="UTF-8"></script> </div>
</body>
</html>
- 参数说明
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:.navOnevent
Nav:'click' //导航事件
注意：需要注意css样式布局，会有影响
demo下载
我的网盘分享：链接：http://pan.baidu.com/s/1bVtt4E 密码：dqkz
