JQuery插件Marquee.js实现无缝滚动效果
Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。
{
yScroll:"top"//初始滚动方向(还可以是"top"或"bottom")
showSpeed:850//初始下拉速度
scrollSpeed:12//滚动速度,
pauseSpeed:5000//滚动完到下一条的间隔时间
pauseOnHover:true//鼠标滑向文字时是否停止滚动
loop:-1//设置循环滚动次数（-1为无限循环）
fxEasingShow:"swing"//缓冲效果
fxEasingScroll:"linear"//缓冲效果
cssShowing:"marquee-showing"//定义class//
eventhandlers
init:null//初始调用函数
beforeshow:null//滚动前回调函数
show:null//当新的滚动内容显示时回调函数
aftershow:null//滚动完了回调函数
}
详细代码：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>marquee测试</title>
<scripttype="text/javascript"src="../../jquery/jquery.js"></script>
<scripttype="text/javascript"src="../marquee/lib/jquery.marquee.js"></script>
<scripttype="text/javascript">
$(function(){
$("#marquee").marquee({
yScroll:"bottom",
showSpeed:850,//初始下拉速度,
scrollSpeed:12,//滚动速度,
pauseSpeed:500,//滚动完到下一条的间隔时间,
pauseOnHover:true,//鼠标滑向文字时是否停止滚动,
loop:-1,//设置循环滚动次数（-1为无限循环）,
fxEasingShow:"swing",//缓冲效果,
fxEasingScroll:"linear",//缓冲效果,
cssShowing:"marquee-showing"//定义class
});
});
</script>
<style>
ul.marquee{
display:block;
line-height:1;
position:relative;
overflow:hidden;
width:400px;
height:22px;
}
ul.marqueeli{
position:absolute;
top:-999em;
left:0;
display:block;
white-space:nowrap;
padding:3px5px;
text-indent:0.8em
}
</style>
</head>
<body>
<ulid="marquee"class="marquee">
<li><ahref="#"target="_blank">WEB前端开发</a>[2011-10-20]</li>
<li><ahref="#"target="_blank">架构设计</a>[2011-09-20]</li>
<li><ahref="#"target="_blank">系统运维</a>[2011-10-16]</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。