今天推荐一个JQ的无缝文字滚动效果，当然了，也可以滚动图片，也叫做跑马灯效果。

笔者推荐一个非常好用的文字滚动jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。

先看一看官方演示，如下：

?

?

如何使用?

1、加载javascript。

<script?type="text/javascript"?src="js/jquery.js"></script>?
<script?type="text/javascript"?src="js/jquery.marquee.js"></script>?
<script?type="text/javascript">?
$(function(){?
????$("#marquee").marquee({yScroll:?"bottom"});?
});?
</script>??

2、加入CSS样式。

ul.marquee?{display:?block;line-height:?1;position:?relative;overflow:?hidden;width:?400px;?
height:?22px;?}?
ul.marquee?li?{position:?absolute;?top:?-999em;left:?0;display:?block;?
white-space:?nowrap;?padding:?3px?5px;?text-indent:0.8em;}?

3、HTML代码如下：

<ul?id="marquee"?class="marquee">?
??????<li><a?href="http://www.chhua.com/"?target="_blank">?
WEB开发笔记</a>?[2010-08-20]</li>?
??????<li><a?href="http://www.chhua.com/web-note1904"?target="_blank">?
JQ的marquee插件的应用</a>?[2010-08-17]</li>?
??????<li><a?href="http://www.chhua.com/web-note1904"?target="_blank">?
JQ插件实现文字无缝滚动效果</a>?[2010-08-16]</li>?
???</ul>?

该插件提供了许多属性选项，您可以配置定制外观和效果。

{?
?????????yScroll:?"top"????????//?初始滚动方向?(还可以是"top"?或?"bottom")?
???????,?showSpeed:?850????????//?初始下拉速度?
???????,?scrollSpeed:?12???????//?滚动速度?
???????,?pauseSpeed:?5000??????//?滚动完到下一条的间隔时间?
???????,?pauseOnHover:?true????//?鼠标滑向文字时是否停止滚动?
???????,?loop:?-1??????????????//?设置循环滚动次数?（-1为无限循环）?
???????,?fxEasingShow:?"swing"??//?缓冲效果?
???????,?fxEasingScroll:?"linear"??//?缓冲效果?
???????,?cssShowing:?"marquee-showing"??//定义class?
?
???????//?event?handlers?
???????,?init:?null????????????????//?初始调用函数?
???????,?beforeshow:?null???????????//?滚动前回调函数?
???????,?show:?null?????????????????//?当新的滚动内容显示时回调函数?
???????,?aftershow:?null????????????//?滚动完了回调函数?
}?

jquery.marquee.js可以到官网地址下载：http://www.givainc.com/labs/marquee_jquery_plugin.htm

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: JQ实现文字无缝滚动效果（Marquee插件使用详解及下载演示） http://www.chhua.com/web-note1904