工作中会遇到这种情况，要在有限的网页空间里放下大段的文字内容，我们会想到用到文字滚动效果。文字滚动效果能充分利用网页的空间、有效地增加网页的内容，可以把新闻、最新文章、或者网站最新公告等显示在较小的空间里。
曾记得几年前的网络世界里，随便打开一个网站，首页飘来飘去的图片广告、来回跑动的文字（还带颜色闪烁效果）比比皆是。各大站长将此效果发挥到极限。可是，近年来，大家会发现，那种飘来飘去和跑动的元素少了。为什么呢？用户体验！众多的不友好网页元素被舍弃，网页终于安静了许多。
原始的文字滚动效果，是许多设计者直接通过DW里的控件直接设置，于是生成了文字滚动（跑马灯）效果。笔者不赞成此方法，原因有笔者很少使用DW生成代码，多是手写代码；另一个是要告诉大家是用于文字滚动的标签Marquee不符合W3C标准，W3C一直不承认Marquee。
那么就有好多解决方案了，当然目标集中在Javascript上。
笔者推荐一个非常好用的文字滚动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.helloweba.com/view-blog-43.html"?target="_blank">?
DIV+CSS网页布局对网站搜索引擎优化的影响</a>?[2010-08-20]</li>?
??????<li><a?href="http://www.helloweba.com/view-blog-42.html"?target="_blank">?
jFlow：jQuery内容滑动特效插件的应用</a>?[2010-08-17]</li>?
??????<li><a?href="http://www.helloweba.com/view-blog-43.html"?target="_blank">?
Open?Flash?Chart?+?PHP?+?Mysql生成动态图表</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
声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接，否则视为侵权。